jQuery Video Click

Question

I have this youtube code:

<iframe width="970" height="582" src="EMBED CODE FROM YOUTUBE" frameborder="0" allowfullscreen></iframe>

Now, I want to do some action when the user clicks on the video (when he clicks play). I tried to get the iframe click, embed click.. Nothing works. What am I doing wrong?

Thanks!

Can you post the scripts that you've tried already? it's possible there was an error in one of those. — Will
– Will, Commented Jul 16, 2011 at 16:17
Hi, there wasn't any error because when I clicked outside the iframe it worked. (wrap or something) I just can't figure how I can do something when the user clicks play. — AdamGold
– AdamGold, Commented Jul 16, 2011 at 16:23

Sotiris · Accepted Answer · 2011-07-16 16:19:32Z

2

You can't do anything within iframe, which is not from the same site. It's forbidden. Read about same origin policy.

answered Jul 16, 2011 at 16:19

Sotiris

40.2k11 gold badges55 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AdamGold Over a year ago

Thanks for the quick answer. So what can I do? How can I do something when the user clicks play?

Sotiris Over a year ago

@AdamGold you can read Youtube API and see what capabilities gives you for play button. code.google.com/apis/youtube/overview.html

AdamGold Over a year ago

Thank you very much Sotiris, will do. I appreciate your answer! :)

Sotiris Over a year ago

@AdamGold you are welcome! About the discussion you had with @Sparky672 read more here meta.stackoverflow.com/questions/5234/…

Paul · Accepted Answer · 2011-07-16 16:46:44Z

I just wrote this modification in the Google Code playground:

 <!--
 You are free to copy and use this sample in accordance with the terms of the
 Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>YouTube Player API Sample</title>
    <style type="text/css">
      #videoDiv { 
        margin-right: 3px;
      }
      #videoInfo {
        margin-left: 3px;
      }
    </style>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load("swfobject", "2.1");
    </script>    
    <script type="text/javascript">
      /*
       * Polling the player for information
       */

      // This function is called when the player changes state
      function onPlayerStateChange(newState) {
        if(newState == 3)
          alert('Video playing');
      }

      // This function is automatically called by the player once it loads
      function onYouTubePlayerReady(playerId) {
        document.getElementById("ytPlayer").addEventListener("onStateChange", "onPlayerStateChange");
      }

      // The "main method" of this sample. Called when someone clicks "Run".
      function loadPlayer() {
        // The video to load
        var videoID = "ylLzyHk54Z0"
        // Lets Flash from another domain call JavaScript
        var params = { allowScriptAccess: "always" };
        // The element id of the Flash embed
        var atts = { id: "ytPlayer" };
        // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
        swfobject.embedSWF("http://www.youtube.com/v/" + videoID + 
                           "&enablejsapi=1&playerapiid=player1", 
                           "videoDiv", "480", "295", "8", null, null, params, atts);
      }
      function _run() {
        loadPlayer();
      }
      google.setOnLoadCallback(_run);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="videoDiv">Loading...</div>
  </body>
</html>

If you use embed the video this way, then the function onPlayerStateChange is called whenever the state of the video changes. state == 3 means that the video is at the very beginning and is starting to play. state == 1 means that the video is playing so if you want to detect multiple times (IE if they pause and hit play again) you need to use newState == 1 where I put newState == 3. But if you only want to detect the first time they start the video this should work.

Collectives™ on Stack Overflow

jQuery Video Click

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related