Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Embedded YouTube video doesn't stop in Chrome and IE

Few topics on this but no answers for me.

Embedding youtube video in a overlay div:

   <div id="blanket" style="display:none;">
     </div>
        <div id="popUpDiv" style="display:none;">
        <a href="#" onclick="popup('popUpDiv')">Close</a>     
        <iframe width="480" height="390" src="https://www.youtube.com/embed/G5AuItKv?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>                                       
        </div>

On firefox when I close the window the video stops, but not in chrome or internet explorer.

Is there some simple javascript I can use to stop it when the user clicks Close?

TIA

Edit:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<a href="#" onclick="javascript:ytplayer.stop()">Close</a>

 <iframe width="480" height="390" src="http://www.youtube.com/e/PE1il5znICA?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0"  allowfullscreen></iframe>


 <script type="text/javascript">
function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("ytplayer");
}

function stop() {
  if (ytplayer) {
    ytplayer.stopVideo();
  }
}
</script>
</body>
</html>
like image 279
James MV Avatar asked Aug 11 '11 17:08

James MV


1 Answers

Youtube has a javascript api that you can enable so as to stop the video. To enable the api add this parameter: &enablejsapi=1 to the end of your src url and now you can access the player through javascript. First you need to get the player reference:

function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("nameofplayer");
}

and now you have the ability to stop the video with the following function:

function stop() {
  if (ytplayer) {
    ytplayer.stopVideo();
  }
}

Just make a call to stop(); inside the onclick function for close.

All the youtube javascript api info is located here.

like image 97
Paul Graffam Avatar answered Sep 25 '22 15:09

Paul Graffam