Demo 5: Play YouTube, Vimeo, HTML Video/Audio
-
Another script, ninjaVideoPlugin.js, included 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">), which is then added to a slide (<li>).
-
You may optionally add extra layers within the same video slide. For example:
Note:<li> <div class="video"> <iframe src="https://player.vimeo.com/video/93292237?api=1&wmode=transparent" frameborder="0" allowfullscreen data-autoplay="1"></iframe> </div> <!-- The following layers are optional --> <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>- 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 recommended. Otherwise, touch navigation may be blocked on some devices.
-
You can optionally add the data-autoplay attribute to the video/audio (<iframe>, <video>, or <audio> tag) with the following values:
- data-autoplay="true": The video will play automatically whenever the slide is active.
- data-autoplay="1": The video will play automatically only the first time the slide is shown.
Note:- Even if you enable data-autoplay, iOS (iPhone, iPad, iPod touch) and Android devices intentionally disable autoplay to reduce mobile data usage. Users must play the video manually.
-
Ninja Slider has a built-in function, playVideo(indexOrLi), which can be used to programmatically control video/audio playback. Please refer to demo 6: playVideo function for details.
Embed YouTube
<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
Embed Vimeo
<iframe src="https://player.vimeo.com/video/136205074" frameborder="0" allowfullscreen></iframe>
Reference: Embedding Vimeo Player
Embed HTML Video
<video controls>
<source src="img1/mcvideo.mp4" type="video/mp4" />
</video>
Reference: HTML Video
Embed HTML Audio
<audio controls data-autoplay="1">
<source src="img1/mcaudio.mp3" type="audio/mpeg">
</audio>
Reference: HTML Audio