i wanted to find a simple method to get a custom preview-image to my videos within my blog by hiding them and make them visible right after click on the preview-image. the user Dominic Green helped me to get it started with the following code. the problem is: the video already starts to play (even if it is hidden) in autoplay-mode right after the page load but i want to have the autoplay to start right after click on the preview-image...
here's my code:
<!doctype html>
<script type="text/javascript">
$(window).load(function(){
$(".video").hide();
$(".loader").click(function(){
$(this).hide();
$(this).parent().find(".video").show();
});
});
#container .post .postimg img{
width:100%;
height:auto;
}
#container .post .postvideo{
position:relative;
display:block;
width:100%;
height:430px;
background-color:#0F3;
}
#container .post .postvideo .con{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:1;
}
#container .post .postvideo .video{
background-color:#C00;
}
#container .post .postvideo .video iframe{
width:100%;
height:100%;
}
#container .post .postvideo .loader{
background-color:#06C;
}
#container .post .postvideo .loader img{
width:100%;
height:100%;
}
<div class="post">
<div class="postvideo">
<div class="con video">
<iframe width="420" height="315" src="http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="con loader">
<img src="http://cache2.allpostersimages.com/p/LRG/27/2728/9CKND00Z/poster/gulin-darrell-pansy-flowers-floating-in-bird-bath-with-dew-drops-sammamish-washington-usa.jpg" width="758" height="388">
</div>
</div>
</div><!--! end of .post -->
<div class="post">
<div class="postvideo">
<div class="con video">
<iframe src="http://player.vimeo.com/video/29017795?title=0&byline=0&portrait=0&color=a80101&autoplay=1" width="460" height="259" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div class="con loader">
<img src="http://cache2.allpostersimages.com/p/LRG/27/2728/9CKND00Z/poster/gulin-darrell-pansy-flowers-floating-in-bird-bath-with-dew-drops-sammamish-washington-usa.jpg" width="758" height="388">
</div>
</div>
</div><!--! end of .post -->