javascript 单击叠加 div 播放 youtube 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17129455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Click overlay div to play youtube video
提问by BeDesinged
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?
我有一个覆盖 youtube iframe 的占位符 div。我正在尝试单击占位符并使用 jquery 播放视频。这看起来很简单，但我终生无法弄清楚这一点。有人可以帮我解决这个问题吗？
Here's the html I'm working with:
这是我正在使用的 html：
<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>
Thanks!
谢谢！
回答by Ronan
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:
为了做到这一点，我建议您使用此功能。您需要一个带有视频源网址的按钮/链接。在 url 上，您需要传递参数“autoplay=1”。当您单击该元素时，将视频源放在 iframe 的“src”属性上；) 乐代码：
<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>
回答by Josh
Looks like you're missing a double-quote after your idattribute.
看起来您在id属性后缺少双引号。
I've also created a CodePen (http://codepen.io/j_shb/pen/hJKaE) that shows how to position a span over an iFrame and then bind a click event with jQuery. (Not sure why the video embed isn't working in my example —?I think it might be CodePen's fault.)
我还创建了一个 CodePen ( http://codepen.io/j_shb/pen/hJKaE)，它展示了如何在 iFrame 上定位跨度，然后使用 jQuery 绑定单击事件。（不确定为什么视频嵌入在我的示例中不起作用 -？我认为这可能是 CodePen 的错。）
Does any of that help?
这些有帮助吗？
