Layer Content – ThemePunch

Text
Image
Shape
YouTube
Vimeo
HTML5 Video
Audio

Text

<div class="tp-caption tp-resizeme largewhitebg"

     data-frames='[{"delay": 500, "speed": 300, "from": "opacity: 0", "to": "opacity: 1"},
                   {"delay": "wait", "speed": 300, "to": "opacity: 0"}]'

     data-x="center"
     data-y="center"
     data-hoffset="0"
     data-voffset="0"
     data-width="['auto']"
     data-height="['auto']"

>Caption Text</div>

Image

<div class="tp-caption tp-resizeme"

     data-frames='[{"delay": 500, "speed": 300, "from": "opacity: 0", "to": "opacity: 1"},
                   {"delay": "wait", "speed": 300, "to": "opacity: 0"}]'

     data-type="image"
     data-x="center"
     data-y="center"
     data-hoffset="0"
     data-voffset="0"
     data-width="['auto']"
     data-height="['auto']"

><img src="assets/images/app_store.png" alt="App Store" width="130" height="40"></div>

Shape

<div class="tp-caption tp-resizeme"

     data-frames='[{"delay": 500, "speed": 300, "from": "opacity: 0", "to": "opacity: 1"},
                   {"delay": "wait", "speed": 300, "to": "opacity: 0"}]'

     data-x="center"
     data-y="center"
     data-hoffset="0"
     data-voffset="0"
     data-width="400"
     data-height="300"
     data-basealign="slide"
     style="background-color: rgba(0, 0, 0, 0.5); border-radius: 5px">

<div>

YouTube

Important Note

YouTube Videos will only play from a live server.

For videos that should fill the entire slider, add “fullscreenvideo” as one of the Layer’s classes, and then use “100%” for the “videowidth” and “videoheight” attributes, as well as the positioning values listed in the following example:

<div class="tp-caption tp-resizeme tp-videolayer fullscreenvideo"
data-videowidth="100%"
data-videoheight="100%"
data-x="left"
data-y="top"
data-hoffset="0"
data-voffset="0"
data-basealign="slide"

Dynamic sizes are also available when using Responsive Setups:

data-videowidth="['1280', '960px', '640px', '360px']"
data-videoheight="['720', '540px', '360px', '240px']"

<div class="tp-caption tp-resizeme tp-videolayer"

     data-frames='[{"delay": 500, "speed": 300, "from": "opacity: 0", "to": "opacity: 1"},
                   {"delay": "wait", "speed": 300, "to": "opacity: 0"}]'

     data-type="video"
     data-ytid="iyuxFo-WBiU"
     data-videowidth="1270"
     data-videoheight="720"
     data-autoplay="off"
     data-videocontrols="controls"
     data-nextslideatend="true"
     data-forcerewind="on"
     data-videoloop="loopandnoslidestop"
     data-videoattributes="version=3&enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0&
                           origin=http://192.168.0.5;"

     data-x="center"
     data-y="center"
     data-hoffset="0"
     data-voffset="0"
     data-basealign="slide">

<div>

YouTube Layer Video Options:

data-ytid

The YouTube Video ID.

data-videowidth

The video's default width (see above for responsive sizes example)

data-videoheight

The video's default height(see above for responsive sizes example)

data-autoplay

Choose if the video will autoplay or not (autoplay not available on mobile devices due to device restrictions)

data-videocontrols

none
controls

Choose if the video should contain player controls.

data-nextslideatend

true
false

Choose to automatically change to the next slide when the video ends.

data-forcerewind

Choose if the video should always replay from the beginning each time the slide is shown. Options are.

data-videoloop

none
loop
loopandnoslidestop

Option to automatically replay the video when it ends. For the "loopandnoslidestop" option, the video will loop, but slider will progress to the next slide accordingly.

data-videoattributes

Additional options to pass into the YouTube API. Enter your website's domain as the "origin" value.