You can now open videos from YouTube and Vimeo inside of a FooBox lightbox.
- Insert a link to your YouTube or Vimeo video as you normally do.
- Once the link is created, switch to “Text” mode in your editor.
- Insert the class “foobox” into the a tag. For example, the YouTube video above looks like this:
<a href="http://youtu.be/mO0g5wWVSVk" class="foobox">
Remember that you can put whatever you like between the a tag, either text or images.
If you’d like to have navigation between several videos then simply add rel=”foobox” to each a tag that you’d like to navigate between. For example the two videos above have navigation between them. The code for we used above has images between the a tags and uses the navigation feature and looks like this:
<a class="foobox" href="http://youtu.be/mO0g5wWVSVk" rel="foobox"><img alt="" src="http://img.youtube.com/vi/mO0g5wWVSVk/0.jpg" /> Open YouTube video</a> <a class="foobox" href="http://vimeo.com/54321299" rel="foobox" src="http://b.vimeocdn.com/ts/375/555/375555680_640.jpg" /> Open Vimeo Video</a>
You can also set your YouTube and Vimeo videos to play automatically when loaded into your FooBox. Simply add the following to the end of the url:
- For autoplay on YouTube Videos add ?rel=0&autoplay=1
- For autoplay on Vimeo videos add ?autoplay=1
Here are some examples:
The code for those is this:
<a class="foobox" href="http://youtu.be/mO0g5wWVSVk?rel=0&autoplay=1" rel="foobox">A Youtube Video with Autoplay and navigation</a> <a class="foobox" href="http://vimeo.com/54321299?autoplay=1" rel="foobox">A Vimeo Video with Autoplay and navigation</a>.
Caption Titles and Descriptions
Lastly, since version 2.1 you can now add caption titles and descriptions to videos. These are not always very effective since they can crowd the video area, so tweak your settings and perhaps do some custom CSS positioning if you feel you NEED to use captions. You can see a live example in the Vimeo thumbnail at the top of this page. That link adds the title and captions with the following:
- To add titles, add “data-caption-title=” to your a tag
- To add descriptions, add “data-caption-desc=” to your a tag.
The code for the Vimeo video above looks like this:
<a class="foobox" href="http://vimeo.com/54321299?autoplay=1" rel="foobox" data-caption-title="Videos can also have captions!" data-caption-desc="But they can get in the way, so they are not enabled by default."><img alt="" src="http://b.vimeocdn.com/ts/375/555/375555680_640.jpg" /> Open Vimeo Video</a>
You can see that this is the fullest example of all the ways to utilize FooBox for videos. That link launches a Vimeo video, responsively in FooBox, with autoplay, navigation to the next video (or inline content or form or image), and had a caption title and description. It also has both an image and text inside the a tag. All of these options are available to you when launching videos in FooBox.