Open YouTube or Vimeo Videos in FooBox
- 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"></a>
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>
NOTICE: YouTube has confirmed that videos loaded on autoplay do not add to the total views that you see on the video youtube page. Read about it here, or see this documentation page (look under "uses autoplay parameter")
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
The code for the Autoplay examples in the Demo section above is:
<a class="foobox" href="http://youtu.be/mO0g5wWVSVk?rel=0&amp;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.