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=";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" ".dtd">
<html xmlns="">
<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=";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>
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./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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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./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>
2 Answers
Reset to default 3Youtube 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.
I had the same problem in HTML5. Iframe doesn't work with Youtube API, You must generate object with enable JavaScript api.
Try change:
<iframe width="480" height="390" src="http://www.youtube./e/PE1il5znICA?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>
to:
swfobject.embedSWF("http://www.youtube./e/PE1il5znICA?enablejsapi=1&version=3&playerapiid=ytplayer","ytplayer", "480", "390", "8", null, null, params, atts);
Exemple:
First add the div to html:
<div id="ytplayer">
<p>You need Flash player and JavaScript enabled to view this video.</p>
</div>
Then add script to create object and add stop function:
<script type="text/javascript">
function onYouTubePlayerReady(playerId){ytplayer = document.getElementById("ytplayer");}
var params = { allowScriptAccess: "always" };var atts = { id: "ytplayer" };
swfobject.embedSWF("http://www.youtube./e/videoID?enablejsapi=1&version=3&playerapiid=ytplayer","ytplayer", "425", "356", "8", null, null, params, atts);
function stop() {if (ytplayer) {ytplayer.stopVideo();}}
</script>
Work for me.