Layer Content

  • 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']"

YouTube Layer Video Options:
  • data-ytidThe YouTube Video ID.
  • data-videowidthThe video's default width (see above for responsive sizes example)
  • data-videoheightThe video's default height(see above for responsive sizes example)
  • data-autoplayon off
    Choose if the video will autoplay or not (autoplay not available on mobile devices due to device restrictions)
  • data-videocontrolsnone controls
    Choose if the video should contain player controls.
  • data-nextslideatendtrue false
    Choose to automatically change to the next slide when the video ends.
  • data-forcerewindon off
    Choose if the video should always replay from the beginning each time the slide is shown. Options are.
  • data-videoloopnone 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-videoattributesAdditional options to pass into the YouTube API. Enter your website's domain as the "origin" value.
  • Important Note:
    Vimeo Videos will only play from an online 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']"

Vimeo Layer Video Options:
  • data-vimeoidThe Vimeo Video ID.
  • data-videowidthThe video's default width (see above for responsive sizes example)
  • data-videoheightThe video's default height (see above for responsive sizes example)
  • data-autoplayon off
    Choose if the video will autoplay or not.  Autoplay not available on mobile devices due to device restrictions.
  • data-videocontrolsnone controls
    Choose if the video should contain player controls.
  • data-nextslideatendtrue false
    Choose to automatically change to the next slide when the video ends.
  • data-forcerewindon off
    Choose if the video should always replay from the beginning each time the slide is shown.
  • data-videoloopnone loop loopandnoslidestop
    Option to automatically replay the video when it ends.  For the "loopandnoslidestop" option, video will loop, but slider will progress to the next slide accordingly).
  • data-videoattributesAdditional options to pass into the Vimeo API.

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']"

HTML5 Layer Video Options:
  • data-videomp4The url to your video, in .mp4 format.
  • data-videowidthThe video's default width (see above for responsive sizes example)
  • data-videoheightThe video's default height (see above for responsive sizes example)
  • data-autoplayon off
    Choose if the video will autoplay or not. (autoplay not available on mobile devices due to device restrictions)
  • data-videocontrolsnone controls
    Choose if the video should contain player controls.
  • data-nextslideatendtrue false Choose to automatically change to the next slide when the video ends.
  • data-forcerewindon off
    Choose if the video should always replay from the beginning each time the slide is shown.
  • data-videoloopnone loop loopandnoslidestop
    Option to automatically replay the video when it ends.  For the "loopandnoslidestop" option, video will loop, but slider will progress to the next slide accordingly).
  • data-allowfullscreentrue false
    Include a fullscreen button option with the video's player controls.
  • data-videopreloadnone auto metadata
    The HTML Video preload attribute.

Audio Layers can be displayed as a player, or can be setup as background music.  For background music, set the “videocontrols” option to “none”, and then add the “tp-hiddenaudio” class to the Layer as shown in the following example:

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

HTML5 Audio Options:
  • data-videomp4The url to your audio, in .mp3 format.
  • data-autoplayon off
    Choose if the video will autoplay or not. (autoplay not available on mobile devices due to device restrictions)
  • data-videocontrolsnone controls
    Choose if the video should contain player controls.
  • data-videowidthThe audio player width
  • data-videoheightThe audio player height
  • data-nextslideatendtrue false Choose to automatically change to the next slide when the video ends.
  • data-forcerewindon off
    Choose if the video should always replay from the beginning each time the slide is shown.
  • data-videoloopnone loop loopandnoslidestop
    Option to automatically replay the video when it ends.  For the "loopandnoslidestop" option, video will loop, but slider will progress to the next slide accordingly).
  • data-videopreloadcanplay canplaythrough metadata
    The HTML Audio preload event.  Learn more about canplay, canplaythrough and metadata.