How to add YouTube Video
Click on the share and choose the embed options on the YouTube page of your selected video. Paste the iframe code like in the example above and add "customplayer" to the iframe:
<iframe width="100%" class="customplayer" height="100%" nobranding loop autoplay nocontrols src="http://www.youtube.com/embed/gcpAiaCcGVo" frameborder="0" allowfullscreen></iframe>
If you would like to display it fullscreen, just specify 100% for the width and height, otherwise you have to define the exact sizes in pixel. The nobranding option remove the YouTube watermark from the video. Loop will enable auto-repeat, therefore the video won't be stopped, plays again and again. Add autoplay command to start the video automatically when it's displayed. Possible to hide the bottom control with the nocontrols option.
To display a video with animated sublayers and animated texts, use the "videozindexon" class on the sublayers/animated texts to make it visible in front of the included video. Add "videozindex" to the parent div of the iframe, like this:
... <div class="tlt hlayer3 videozindexon" data-in-effect="flipInX" data-out-effect="rollOut"> <!-- ADDED ANIMATED TEXT LAYER WITH PREDEFINED POSITION (hlayer2) AND WHITE FONT COLOR --> <ul class="texts"> <!-- ANIMATED TEXT CONTAINER START --> <li>Embed YouTube Videos</li> <!-- FIRST ROW OF ANIMATED TEXT CONTENT --> <li>Easy Setup, Detailed Documentation</li> <!-- SECOND ROW OF ANIMATED TEXT CONTENT --> <li>Unlimited Layers, Unlimited Transitions</li> <!-- THIRD ROW OF ANIMATED TEXT CONTENT --> </ul> <!-- ANIMATED TEXT CONTAINER END --> </div> <!-- ANIMATED TEXT LAYER END --> <div class="layer1_1 thsitem" class="videozindex" data-delay="3000" data-speed="2000" data-animation="fadein" data-easing="easeInOutExpo"> <!-- FIRST ANIMATED SUBLAYER ITEM START --> <iframe width="100%" class="customplayer" height="100%" nobranding loop autoplay nocontrols src="http://www.youtube.com/embed/gcpAiaCcGVo" frameborder="0" allowfullscreen></iframe> <!-- ANIMATED SUBLAYER ITEM CONTENT (YOUTUBE VIDEO) -->
</div> <!-- FIRST ANIMATED SUBLAYER ITEM END -->
...
How to add Preloader
The plugin has an inbuilt preloader, it is enabled by default, but you can set on or off during the initialization. Additional HTML code is needed to make it work, just insert the following lines after your <body>:
<div id="loader"> <div id='ths_preloader'> <img src='images/preloader.gif'> </div> <div class="top"> <img src="images/bgtop.png" alt="bgtop"> </div> <div class="loader_line"></div> <div class="bottom"> <img src="images/bgbottom.png" alt="bgbottom"> </div> </div>
You can select from 5 preloader images, change the img source from preloader.gif to preloader2.gif or preloader3.gif, preloader4.gif, preloader5.gif
Credits: Photos made by Nicholas A. Tonelli