Open YouTube or Vimeo Videos in FooBox

FooBox Documentation

Open YouTube or Vimeo Videos in FooBox

See Demo Here

Code Examples:

  1. Insert a link to your YouTube or Vimeo video as you normally do.
  2. Once the link is created, switch to “Text” mode in your editor.
  3. Insert the class “foobox” into the a tag. For example, the YouTube video above looks like this:

<code><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.

Navigation

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, if you had two videos with navigation between them, the code, including images between the “a” tags and using the navigation feature, would look like this:

<code><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>

Auto Play

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

Caption Titles and Descriptions

Lastly, you can 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. Your link can include 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.