July 22, 2014

Weebly Tricks #62 - Video Lightbox Widget

Posted by Domz at 7/22/2014

Video Lightbox for Weebly

I would like to grant my avid reader's wish of having a free lightbox effects for his videos. Thanks for prettyPhoto by the way. Aside from videos, it also supports images, slideshows, flash and more but we will concentrate on videos first, specifically those from YouTube videos. This tutorial is very very easy. Sharing buttons for each video are included as well.





FILES NEEDED
How to use these files? Click Here!


FOOTER CODE
Where to place these codes? Click Here!


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

Note:
Red text- Change with your site address.


HEADER CODE
Where to place these codes? Click Here!


<link rel="stylesheet" href="http://mwtdatabase.weebly.com/files/theme/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />

Note:
Red text - Change with your site address.


BODY CODE
Where to place these codes? Click Here!


<a href="http://www.youtube.com/watch?v=aDU06NuZ3k8" rel="prettyPhoto" title=""><img src="http://img.youtube.com/vi/aDU06NuZ3k8/0.jpg" alt="The Will of the Wind" width="140" /></a>

Notes:
Red text - Your YouTube video link.
Green text - The code of your YouTube video, this is for your thumbnail.You can see this at the end of each video link usually after the "v=".
Yellow text - The title of your video.
Blue text - the default dimension of the video thumbnail on your page.


CONCLUSION


This tutorial is really easy. If you have questions or you need support, just comment below or post on our forum. You may also visit the code source found at the demo page.

Now you don't have to worry about spaces consumed by your videos. See you on my next posts!

This tutorial uses on of the "10 Capsulated Tips".


Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

9 comments:

  1. Hola Domz! I just discovered your site. Thank you so much for this information and excellent tutorials! It worked great! How can I add the "play" button to appear on the thumbnail? Thanks again! Sherrie

    ReplyDelete
    Replies
    1. Hi "Sherrie",

      The original code is from prettyPhoto and they support queries. They may be able to help you better since it was them who created the code, please visit: http://forums.no-margin-for-errors.com/categories/2/p

      Delete
  2. Hi Domz,

    I couldn't get the light box effect to work on my page.
    Upon clicking it just opens the a new tab into the youtube page. Any advice?

    ReplyDelete
    Replies
    1. Hi BSP,

      I will gladly help you insert it when you post this on the forum. Add me as an editor to your site with my email domz3669@yahoo.com.ph.

      Delete
    2. Hi Domz,

      Got the script to work perfectly. Just needed to paste all the codes as it is and do bit by bit editing to my own site address and all that.
      Thanks for this great code!
      I have a request for a code on my website.. Anywhere I can put it up to?

      Delete
    3. BSP,

      Request for what code? the HTML, body or head? Please specify. To help you more, each code has a tutorial on how to use them.

      Delete
  3. Dom,

    Is there slight differences when trying to do this with a Vimeo hosted video? Changes in the Body Code? Thank you

    ReplyDelete
    Replies
    1. HI Greg,

      When you check the code source, there is really no difference except the video link. Check it here: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

      Delete
  4. I there any way to change the hight and width of the video? Thank you

    ReplyDelete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top