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?
Here's the html I'm working with:
<div class="container">
<span class="placeholder"></span>
<iframe id="video width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
Thanks!
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?
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./embed/abqjFFtAPRo" frameborder="0" allowfullscreen></iframe>
</div>
Thanks!
Share Improve this question asked Jun 16, 2013 at 1:42 BeDesingedBeDesinged 551 gold badge3 silver badges8 bronze badges 2- 1 Can you please elaborate what you're trying to do. If you're trying to get an 'icon' over the video then I don't really see a point in that. – evan.stoddard Commented Jun 16, 2013 at 1:52
- 1 Possible duplicate: stackoverflow./questions/8902718/… – evan.stoddard Commented Jun 16, 2013 at 1:52
2 Answers
Reset to default 3To 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./embed/abqjFFtAPRo?rel=0&autoplay=1">Load video</button>
<iframe id="video" width="560" height="315" src="" frameborder="0" allowfullscreen/>
</div>
</body>
</html>
Looks like you're missing a double-quote after your id attribute.
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.)
Does any of that help?