Video Slider

• Currently supports Youtube and Vimeo
• iframe based embedding. Works on many different devices, even those that don't support Flash.

How to embed videos to the slider

1. Another script, mcVideoPlugin.js that is available in the download, should be referenced before the js-image-slider.js
   <script src="themes/6/mcVideoPlugin.js" type="text/javascript"></script> <script src="themes/6/js-image-slider.js" type="text/javascript"></script>
2. Wrap slide picture with a link to the video. The link should specify class="video" and its href must be formatted as below without any extra parameters.
   <a class="video" href="http://vimeo.com/38375192"> <img src="images/img3.jpg" /> </a> <a class="video" href="http://www.youtube.com/watch?v=AQ-3aRhvFwU"> <img src="images/img4.jpg" alt="" /> </a>

   Done. That's it.

   • The link with class="vedio" will place a semi-transparent play button on top of the slide image via CSS.
     
     By default:
     • Clicking on the slide image will pause the slideshow and start playing the video.
     • After the play is finished, the slider will show next slide and resume the slideshow.
     • Clicking on the slider's navigation bullet/button during the video play will stop the play, and resume the slideshow.
   • autoPlayVideo="true" and/or autoNextOnVideoFinished="false" can be added to the link to overwrite the slider's default behavior.
     <a class="video" href="http://vimeo.com/38375192" autoPlayVideo="true"> <img src="images/img3.jpg" /> </a>

     autoPlayVideo="true": starts playing the video automatically as soon as the slide is displayed without the need of clicking on it

     autoNextOnVideoFinished="false": stays in current slide when the play is finished without resuming the slideshow

   • FAQ: Enable clicking thumbnail plays the video

Demos: 012 345 678