{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 等我变得足够好 的问题《video gets hidden via javascript but already start》','https://www.manongdao.com/q-1117555.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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 -->
If you don't want to use youtube API or vimeo API, I'd suggest you have iframe src empty and set it when the loader div is clicked. so
I will use
and
then in click event of js code, just set the data-iframe-src value to iframe src:
You will need to use,
YouTube JavaScript Player API
Alternatively,
Put this as url (
autoplay off)And on click of button change src to
This wont be as smooth as js api, but will do the trick.