Adding videos

The slider has built-in support for YouTube videos, Vimeo videos, simple HTML5 videos and HTML5 videos enhanced with VideoJS.

For YouTube and Vimeo videos, you can use the "lazy-load" mode. This mode will only display a poster and a play button, and the actual video will be loaded only when the play button is pressed. It's recommended to use this mode when you load many videos or when you experience any problem with the default mode.

YouTube

First, you need to get the embed code from the YouTube page. You will need to append the following parameters to the URL of the video: "enablejsapi=1" and "wmode=transparent". The first parameter is necessary in order to enable the automatic handling, and the second parameter is necessary if the video loads in the flash player.

<iframe src="http://www.youtube.com/embed/msIjWthwWwI?rel=0&enablejsapi=1&wmode=transparent" width="580" height="380" frameborder="0"></iframe>

You will also need to load the jquery.videoController.min.js script in the page.

YouTube Lazy Load

<a class="video" href="http://www.youtube.com/watch?v=msIjWthwWwI&rel=0"> 
    <img src="http://domain.com/path/to/image.jpg" alt="" width="100%" height="200" /> 
</a>

Vimeo

For Vimeo videos, you need to get the embed code from Vimeo and append "api=1" to the URL of the video.

<iframe src="http://player.vimeo.com/video/3116167?api=1" width="580" height="380" frameborder="0"></iframe>

You will also need to load the froogaloop.min.js and the jquery.videoController.min.js scripts in the page.

Vimeo Lazy Load

<a class="video" href="http://vimeo.com/3116167?byline=0"> 
    <img src="http://domain.com/path/to/image.jpg" alt="" width="100%" height="200" /> 
</a>

NOTE: The Vimeo and YouTube APIs will work only if you test the slider on a local or online server. You will also need to test on a server if you use JWPlayer.

HTML5

<video controls preload="none" width="580" height="380"
       poster="http://bqworks.com/products/assets/videos/bbb/bbb-poster.jpg">
   <source src="http://bqworks.com/products/assets/videos/bbb/bbb-trailer.mp4" type="video/mp4"/>
   <source src="http://bqworks.com/products/assets/videos/bbb/bbb-trailer.ogg" type="video/ogg"/>
</video>

For simple HTML5 videos, you will need to load the jquery.videoController.min.js scripts in the page.

VideoJS

VideoJS is a 3rd party library that will enhance the look of the HTML5 video and will provide a Flash fallback for browsers that don't support the HTML5 video element, like IE8 and below.

Loading this type of video requires the addition of some VideoJS specific classes. Also, you will need to give the video a unique ID and add the "data-video" attribute.

<video id="video-1" class="video-js vjs-default-skin" controls="controls" preload="none"
       width="580" height="380"
       poster="http://bqworks.com/products/assets/videos/sintel/sintel-poster.jpg" data-video="{}">
   <source src="http://bqworks.com/products/assets/videos/sintel/sintel-trailer.mp4" type="video/mp4"/>
   <source src="http://bqworks.com/products/assets/videos/sintel/sintel-trailer.ogv" type="video/ogg"/>
</video>

You will also need to load the video.min.js, video-js.min.css and jquery.videoController.min.js scripts in the page.

Videos can be inserted in layers using a simple shortcode, which I recommend, or using HTML code. When you edit the content of a layer, the "Insert Video" button becomes enabled and you can choose the type of video you want to insert from the drop-down. The shortcode for the selected video will appear in the layer. You will then need to provide further information about the video, like the ID of YouTube or Vimeo videos, or the path to the video files in case of Video JS or HTML5 videos.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk