Blog Comments

  1. molendijk's Avatar
    I found a way to not only apply javascript to the videos loaded in an existing (HTML) iframe, but also to their different states. If we want to run code depending on the player's state, we must do
    Code:
    onload="some_player=new YT.Player(this ,{events: {'onStateChange':function(e){if(e.data === some_state){some_function()}}}})"
    See this for all the details.
  2. molendijk's Avatar
    Here are two examples:
    Code:
    <head>
    <script src="http://www.youtube.com/player_api"></script> 
    </head>
    
    <body>
    <div style="position: relative; width: 319px">
    <div style="position: relative; text-align: center">
    <button style="cursor: pointer" onclick="player1.loadVideoById('bKZbvluHcNo')">(re)start</button>
    <button style="cursor: pointer" onclick="player1.playVideo()">play</button>
    <button style="cursor: pointer" onclick="player1.pauseVideo()">pause</button><br>
    <button style="cursor: pointer" onclick="player1.seekTo(player1.getDuration())">stop</button>
    <button style="cursor: pointer" onclick="player1.unMute()">sound on</button>
    <button style="cursor: pointer" onclick="player1.mute()">sound off</button>
    </div>
    <iframe style="position: relative; width: 319px; height: 280px;  border: 1px solid black; " src="http://www.youtube.com/embed/bKZbvluHcNo?html5=1&amp;enablejsapi=1&amp;autoplay=0&amp;rel=0&amp;showinfo=0&amp;modestbranding=1&amp;controls=1&amp;autohide=0&amp;vq=large" frameborder="0" allowfullscreen onload="player1=new YT.Player(this)"></iframe>
    </div>
    
    <div style="position: relative; width: 319px">
    <div style="position: relative; text-align: center">
    <button style="cursor: pointer" onclick="player2.loadVideoById('OsLap6ZNNQo')">(re)start</button>
    <button style="cursor: pointer" onclick="player2.playVideo()">play</button>
    <button style="cursor: pointer" onclick="player2.pauseVideo()">pause</button><br>
    <button style="cursor: pointer" onclick="player2.seekTo(player2.getDuration())">stop</button>
    <button style="cursor: pointer" onclick="player2.unMute()">sound on</button>
    <button style="cursor: pointer" onclick="player2.mute()">sound off</button>
    </div>
    <iframe style="position: relative; width: 319px; height: 280px;  border: 1px solid black; " src="http://www.youtube.com/embed/OsLap6ZNNQo?html5=1&amp;enablejsapi=1&amp;autoplay=0&amp;rel=0&amp;showinfo=0&amp;modestbranding=1&amp;controls=1&amp;autohide=0&amp;vq=large" frameborder="0" allowfullscreen onload="player2=new YT.Player(this)"></iframe>
    </div>
    </body>
  3. Beverleyh's Avatar
    Basic support has now been added for IE7. Content is accessible via a scrollbar, like it is in IE8.
  4. Beverleyh's Avatar
    Basic support has now been added for IE7. Content is accessible via a scrollbar, like it is in IE8.