点击叠加div以播放YouTube视频 [英] Click overlay div to play youtube video
问题描述
我有一个覆盖youtube iframe的占位符div。我正在尝试点击占位符并使用jquery播放视频。这似乎很简单，但我不能为我的生活弄清楚这一点。有谁可以帮我这个？
I have a placeholder div overlaying a youtube iframe. I'm trying to click on the placeholder and play the video using jquery. It seems very simple, but I can't for the life of me figure this out. Could anyone help me with this?
这是我正在使用的html：
Here's the html I'm working with:
<div class="container">
<span class="placeholder"></span>
<iframe id="video width="560" height="315" src="http://www.youtube.com/embed/abqjFFtAPRo" frameborder="0" allowfullscreen></iframe>
</div>
谢谢！
推荐答案
为了实现这个目的，我建议您使用此功能。您需要一个带有视频源URL的按钮/链接。在网址上您需要传递参数autoplay = 1。当您点击元素时，将视频源放在iframe的属性src上;）Le code：
To made this fast i suggest to you this functionality. You need a button/link with the video source url. On the url you need to pass the parameter "autoplay=1". When you click the element, puts the video source on the attribute "src" of your iframe ;) Le code:
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#loadVideo").bind("click", function(){
videoUrl = $(this).attr("data-video-src")
$("#video").attr("src", videoUrl)
});
});
</script>
</head>
<body>
<div class="container">
<button id="loadVideo" data-video-src="http://www.youtube.com/embed/abqjFFtAPRo?rel=0&autoplay=1">Load video</button>
<iframe id="video" width="560" height="315" src="" frameborder="0" allowfullscreen/>
</div>
</body>
</html>
这篇关于点击叠加div以播放YouTube视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
