Youtube Video

Vimeo Video

HTML5 Video

This example of Theme 4 uses the image folder as the source for the slide background images but also uses videos from different sources and video providers.

Highlighted features: mixed content, auto height, video handling, responsive, touch-swipe, auto-scale layers.

This example demonstrates the slider's support for video content, not only images. In this case, it's possible to load videos, text and any other HTML content. Also, the videos will be controlled automatically, so if another slide is selected while the video is playing, the video will be stopped automatically. Also, when the video starts, the autoplay feature will be stopped.The video types or providers supported by this module are: YouTube, Vimeo, HTML5 and Video.js.

Here are the examples of code that was used on each slide for the Theme 4 example shown above.

Slide 1

<div class="sp-layer" data-show-duration="500" data-show-delay="1000">
    <a class="sp-video" href="//www.youtube.com/watch?v=7CVtTOpgSyY">
        <img src="/images/tc_responsive_layer_slider/theme4/1.jpg" width="840" height="373" />
    </a>
</div>

<h2 class="sp-layer"
    data-position="bottomCenter"
    data-show-transition="up"
    data-show-delay="1000"
    data-vertical="60"

style="color:#000; text-shadow:1px 2px 5px rgba(0,0,0,.2);"
>
   Youtube Video
</h2>

Slide 2

<div class="sp-layer" data-show-duration="500" data-show-delay="1000">
   <iframe class="sp-video" src="http://player.vimeo.com/video/84021939?api=1" width="840" height="373" frameborder="0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

<h2 class="sp-layer"
    data-position="bottomCenter"
    data-show-transition="up"
    data-show-delay="1000"
    data-vertical="60"

style="color:#fff; text-shadow:1px 2px 5px rgba(0,0,0,.2);"
>
  Vimeo Video
</h2>

Slide 3

<div class="sp-layer"  data-horizontal="0"  data-vertical="0">
<video class="sp-video" poster="/images/tc_responsive_layer_slider/theme4/3.jpg" width="840" height="373" controls="controls" preload="none">
    <source src="/images/tc_responsive_layer_slider/diamonds.mp4" type="video/mp4"/>
    <source src="/images/tc_responsive_layer_slider/diamonds.ogv" type="video/ogg"/>
</video>
</div>

<h2 class="sp-layer"
    data-position="bottomCenter"
    data-show-transition="up"
    data-show-delay="1000"
    data-vertical="60"

style="color:#fff; text-shadow:1px 2px 5px rgba(0,0,0,.2);"
>
   HTML5 Video
</h2>