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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With