How to add videos

Slidea supports perfectly responsive HTML5, YouTube and Vimeo videos with a very rich API. You can control width, height, reset, pause, autoplay and even volume using Slidea’s intelligent video integration.

Videos should be placed inside the content part of a slide or inside a video background markup which we can see in the next part of the documentation.

YouTube

<!-- YouTube -->
<iframe class="slidea-video" data-slidea-src="https://www.youtube.com/embed/9zeX0MAAWQ0"
        data-slidea-width="1280"
        data-slidea-height="720"
        data-slidea-pause-slider="true"
        data-slidea-autoplay="true"
        data-slidea-reset="false"
        data-slidea-volume="0.8"
        data-slidea-controls="false"
        allowfullscreen>
</iframe>

Vimeo

<!-- Vimeo -->
<iframe class="slidea-video" data-slidea-src="http://player.vimeo.com/video/99876106?title=0&byline=0&portrait=0"
        data-slidea-width="1280"
        data-slidea-height="720"
        data-slidea-pause-slider="true"
        data-slidea-autoplay="true"
        data-slidea-reset="false"
        data-slidea-volume="0.8"
        data-slidea-controls="false"
        allowfullscreen>
</iframe>

HTML5

<!-- HTML5 -->
<video class="slidea-video"
        data-slidea-width="1280"
        data-slidea-height="720"
        data-slidea-pause-slider="true"
        data-slidea-autoplay="true"
        data-slidea-reset="false"
        data-slidea-volume="0.8"
        data-slidea-controls="false">
  <source src="public/video/video.mp4" type="video/mp4">
  <source src="public/video/video.webm" type="video/webm">
  <source src="public/video/video.ogv" type="video/ogg">
</video>

You can use videos inside of HTML layers or inside your HTML content. Either of which will give you a beautiful responsive video.

Using videos as layers

One of the most common use cases of videos is using them as layers. This will allow you to get pretty crazy with your creativity. Fitting videos on a screen was never easier.

<!-- Slidea -->
<div class="slidea">

  <!-- Slide -->
  <div class="slidea-slide">

    <!-- Layer -->
    <div class="slidea-layer"
       data-slidea-width="640" data-slidea-height="480">

       <!-- Video -->
       <iframe class="slidea-video" data-slidea-src="http://player.vimeo.com/video/99876106?title=0&byline=0&portrait=0"
               data-slidea-width="640" data-slidea-height="480"
               data-slidea-autoplay="true" allowfullscreen>
       </iframe>
    </div>

    <!-- Background -->
    <img class="slidea-background" data-slidea-src="assets/img/slide-1.jpg">

  </div>
</div>

Can I add a cover image?

If you want the video to have a different image until it is played, you can use a cover image. Just place a video markup together with a cover image in the same div, and let Slidea handle the rest.

<!-- Video Cover Wrapper -->
<div class="slidea-video-cover-wrapper">

  <!-- Cover Image -->
  <div class="slidea-video-cover">
    <img class="img-responsive" src="public/img/sample.jpg">
  </div>

  <!-- Video -->
  <iframe class="slidea-video" data-slidea-src="https://www.youtube.com/embed/9zeX0MAAWQ0"
          data-slidea-width="1280"
          data-slidea-height="720"
          data-slidea-pause-slider="true"
          data-slidea-autoplay="false"
          allowfullscreen>
  </iframe>
</div>