Adding videos

In general, you add videos inside the layers either using the slider's video shortcodes or raw HTML code. Also, instead of typing the video shortcode, you can use the 'Insert Video' menu below the layers' editing area.

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

[slider_pro_video type="youtube" id="msIjWthwWwI" params="rel=1&showinfo=0" width="100%" height="200"]

The "id" argument represents the ID of the YouTube video. You can use the "params" argument to pass a list of YouTube parameters. You can find a list of all the available parameters here.

YouTube - HTML code

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

YouTube Lazy Load - shortcode

[slider_pro_video type="youtube" mode="lazy-load" id="msIjWthwWwI" poster="path/to/image.jpg" params="rel=0"]

YouTube Lazy Load - HTML code

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

[slider_pro_video type="vimeo" id="3116167" params="title=0&byline=0" width="100%" height="200"]

The "id" argument represents the ID of the Vimeo video. You can use the "params" argument to pass a list of parameters.

Vimeo - HTML code

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

Vimeo Lazy Load - shortcode

[slider_pro_video type="vimeo" mode="lazy-load" id="3116167" poster="path/to/image.jpg" params="byline=0"]

Vimeo Lazy Load - HTML code

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

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.

HTML5 - shortcode

[slider_pro_video type="html5"
                  poster="http://bqworks.com/products/assets/videos/bbb/bbb-poster.jpg"
                  source1="http://bqworks.com/products/assets/videos/bbb/bbb-trailer.mp4"
                  source2="http://bqworks.com/products/assets/videos/bbb/bbb-trailer.ogv"]

HTML5 - HTML code

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

VideoJS - shortcode

[slider_pro_video type="video-js"
                  poster="http://bqworks.com/products/assets/videos/sintel/sintel-poster.jpg"
                  source1="http://bqworks.com/products/assets/videos/sintel/sintel-trailer.mp4"
                  source2="http://bqworks.com/products/assets/videos/sintel/sintel-trailer.ogv"]

VideoJS - HTML code

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

Videos can be inserted in layers using a simple shortcode, which I recommend, or using HTML code. If you edit the content of a layer, the "Insert Video" button will become 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