Click overlay div to play youtube video

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.com/embed/abqjFFtAPRo" frameborder="0" allowfullscreen></iframe>
</div>

Thanks!

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>

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?

来源：https://stackoverflow.com/questions/17129455/click-overlay-div-to-play-youtube-video

标签

javascript

jquery

youtube

embed