Play Youtube, Vimeo, HTML video or audio with Ninja Slider

Ninja Slider supports YouTube and Vimeo videos. It also supports HTML videos and audios.

Visit Ninja Slider to download this demo or purchase license.

Note:The slider with videos functions well when the page is hosted on a web server or localhost server. Don't test it by opening the page from local file path (file:///...).

Embed Videos / Audios into Ninja Slider

Another script, ninjaVideoPlugin.js that is available in the download, should be referenced in the head section of the page: <script src="5/ninjaVideoPlugin.js"></script>
Any video or audio element such as <iframe>, <video>, or <audio>, should be placed inside a DIV element (<div class="video">), and the DIV element is added into a slide (<li>);
It is optional to add extra layers within the same video slide. For example: <li> <div class="video"> <iframe src="https://player.vimeo.com/video/93292237?api=1&wmode=transparent" frameborder="0" allowfullscreen data-autoplay="1"></iframe> </div>  <a class="ns-img" href="img1/1.jpg"></a> <div class="caption">Supports Youtube, Vimeo and HTML video/audio</div> <div class="video-playbutton-layer"></div> </li> Notice:
- The slide image in the example is placed on top of the video. For HTML audio, it should be beneath the audio (inserted before the <div class="video">...</div>);
- For Youtube and Vimeo, adding the slide image layer is preferred. Otherwise touch navigation will be blocked on some devices.
You can optionally add data-autoplay attribute to the video/audio (the <iframe>, <video>, or <audio> tag) with the following values:
- data-autoplay="true": The video will play automatically when the slide is active;
- data-autoplay="1": The video will play automatically only for the first time when the slide is shown.
Note:
- Even if you have turned on the data-autoplay, iOS (iPhone, iPad, iPod touch) and Android devices will disable any auto play intentionally because of the high amout of traffic consume on mobile networks. Users have to play the video manually.
The Ninja Slide has a built-in function, playVideo(indexOrLi). It can be used to programmatically control the video/audio playing. Please refer to demo 6: playVedio function for details.

Embed YouTube

Sample code:

<iframe src="https://www.youtube.com/embed/j685NaMDVYE?enablejsapi=1&start=0&rel=0&showinfo=0
    &iv_load_policy=3&modestbranding=1" frameborder="0" allowfullscreen></iframe>

Reference: Youtube Player Parameters

Wanta play just a segment of a video? Add parameters start, or end, or both: &start=63&end=100

Embed Vimeo

Sample code:
<iframe src="https://player.vimeo.com/video/136205074" frameborder="0" allowfullscreen></iframe>

Reference: Embedding Vimeo Player

Embed HTML Video

Sample code:

<video controls>
    <source src="img1/mcvideo.mp4" type="video/mp4" />
</video>

Reference: HTML Video

Embed HTML Audio

Sample code:

<audio controls data-autoplay="1">
    <source src="img1/mcaudio.mp3" type="audio/mpeg">
</audio>

Reference: HTML Audio

More Info

Full documentation: Ninja Slider
Questions & Answers: Posts in the forum