Adding Videos

Adding Videos

There are two ways to include a video into your slide. First, through the "data-src" custom attribute. The "data-src" attribute only support the video URL from Dailymotion, Vimeo and YouTube. The other way to include a video is by using the evoEmbed class element.

Adding Video Through The "data-src" Attribute

The "data-src" attribute only support video URL of the Dailymotion, Vimeo, and YouTube. Simply paste the URL into the "data-src" attribute, like so:

<!doctype html>
<html>
<head>
    <title>My First Evo Slider</title>
</head>
<body>

<div id="mySlider" class="evoslider default">    
    <dl>
    
	    <dt>slide one</dt>
	    <dd data-src="http://www.youtube.com/watch?v=e3zb1hxwLDE">
	    </dd>
	
	    <dt>slide two</dt>
	    <dd data-src="http://vimeo.com/7449107">
	    </dd>
	
	    <dt>slide three</dt>
	    <dd data-src="http://www.dailymotion.com/video/xpqlc1_it-s-gonna-be-hard_fun">
	    </dd>
    
    </dl>
</div> 

</body>
</html>

Using The evoEmbed Element

For the video that not support by the "data-src" attribute, you can include the video through the evoEmbed element, like so: 

<!doctype html>
<html>
<head>
    <title>My First Evo Slider</title>
</head>
<body>

<div id="mySlider" class="evoslider default">    
    <dl>
    
	    <dt>slide one</dt>
	    <dd>
	        <div class="evoEmbed">
	            <iframe src="http://player.vimeo.com/video/35965795?title=0&byline=0&portrait=0&color=ffffff" 
	                width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
	            </iframe>
	        </div>
	    </dd>	    
    
    </dl>
</div> 

</body>
</html>

Video Thumbnail

The thumbnail image will load automatically from each provider (Dailymotion, Vimeo and YouTube) as long as you don't define the "data-thumb" attribute.