Smart Video

Provides automatic control of the videos loaded inside the panels. For example, the video will pause automatically when the panel closes, or the autoplay, if enabled, will stop when a video starts playing. Inside the accordion, videos can be added in the main panel container or inside layers.

The video types or providers supported by this module are: YouTube, Vimeo, HTML5, Video.js and SublimeVideo.

In order to have a video automatically controlled by the accordion, the video must have the ga-video class. Also, there are some provider-specific requirements for the videos, as presented below.

YouTube

The videos need to have the enablejsapi=1 parameter appended to the URL of the video. It's also recommended to append the wmode=opaque parameter. The parameters need to be delimited by & .

Example:

<iframe class="ga-video" src="http://www.youtube.com/embed/msIjWthwWwI?enablejsapi=1&amp;wmode=opaque" width="500" height="350" frameborder="0" allowfullscreen></iframe>

Vimeo

The videos need to have the api=1 parameter appended to the URL of the video.

Example:

<iframe class="ga-video" src="http://player.vimeo.com/video/43401199?api=1" width="500" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

HTML5

Simple HTML5 videos don't need any preparations other than having the ga-video class.

Example:

<video class="ga-video" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none">
    <source src="path/to/video.mp4" type="video/mp4"/>
    <source src="path/to/video.ogv" type="video/ogg"/>
</video>

Video.js

Each Video.js video must have a unique 'id' attribute. Also, because the Video.js library changes the HTML markup of the video, we'll create a container element and add the ga-video class to that element instead. Also, the container element must have the data-video-id attribute, which is used to specify the 'id' attribute of the video.

Example:

<div class="ga-video" data-videojs-id="video1">
    <video id="video1" class="ga-video video-js vjs-default-skin" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none"
            data-setup="{}">
        <source src="path/to/video.mp4" type="video/mp4"/>
        <source src="path/to/video.ogv" type="video/ogg"/>
    </video>
</div>

Please note that, in order to use Video.js, you need to load the Video.js JavaScript and CSS files in your page. More information about how to use Video.js, in general, can be found on theofficial Video.js page .

SublimeVideo

Each SublimeVideo instance must have a unique 'id' attribute.

Example:

<video id="video2" class="ga-video sublime" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none">
    <source src="path/to/video.mp4" type="video/mp4"/>
    <source src="path/to/video.ogv" type="video/ogg"/>
</video>

Please note that, in order to use SublimeVideo, you will also need to load a script in your page which you need to download from the SublimeVideo page. More information about how to use SublimeVideo, in general, can be found on the official SublimeVideo page .

Notes

  • Most of the videos will work correctly only if the page is on a server. It can be a local server or an online server.

  • iOS doesn't allow videos to play automatically, so an initial user action is required in order to play the video. After the initial action, the videos will be controlled automatically.

  • When pausing a YouTube video automatically, on iOS, the video will be stopped instead, because only pausing it makes the entire region that the video occupies unresponsive to user input. For example, if another video slides in over the YouTube video, we won't be able to play this video because the controls will be unresponsive. However, this doesn't occur if the YouTube video is stopped instead of paused, so the accordion does this.

  • The control bar of SublimeVideo videos will become unresponsive on iOS if the 'auto' responsive mode is used. It seems that, in general, scaling SublimeVideo using the CSS3 'transform' property will make them unresponsive to user input.

This module is showcased in example3.html.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk