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:

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

  Note:
  • 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

More Demos

Demo 6, Demo 9