• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2274
  • Last Modified:

How to stop you tube play back when div is hidden

Hello,

I have a hidden div that pops up when user clicks a link. This div contains a you tube video. When the div is visible and the video is playing, when user clicks to close the panel, the video keeps playing as it is still on the page just being hidden. Is there a way to stop playback when this happens? Or if not with this method another method that would achieve the same effect?

Would also like the vid to auto play on open if that is possible?

Thanks for any help!



<!-- link to open popupVid -->
<p><a href="javascript:;" onClick="document.getElementById('popupVid').style.visibility='visible';">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;top:130px;left:15px;width:500px;background-color:#D05F27;height:auto;visibility:hidden;z-index:200;">
<iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>
   
<br /><br />
   
  <a href="javascript:;" onClick="document.getElementById('popupVid').style.visibility='hidden';"><img class="close" src="images/x-orange.gif" width="15" height="15" alt="close" /></a>

</div><!--end of popupVid -->

Open in new window

0
igloobob
Asked:
igloobob
1 Solution
 
HainKurtSr. System AnalystCommented:
where is the close link/button? how do you close it?
0
 
plusone3055Commented:
http://brianwong.com/blog/youtube-embed-code-autoplay/


Code to Autoplay YouTube Movie AND turn OFF related movies at the end of the movie:
<embed src=”http://www.youtube.com/v/EBM854BTGL0&autoplay=1&rel=0¿ type=”application/x-shockwave-flash” wmode=”transparent” width=”425¿ height=”344¿></embed>

0
 
igloobobAuthor Commented:
HainKurt:

this line:

<a href="javascript:;" onClick="document.getElementById('popupVid').style.visibility='hidden';"><img class="close" src="images/x-orange.gif" width="15" height="15" alt="close" /></a>

plusone3055: i'll have a look at that thanks, i'm leaving for the day now so will get on it tomorrow.

Thanks for the help!

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
StingRaYCommented:
Try using

.style.display = 'none';

instead of

.style.visibility = 'hidden';
0
 
igloobobAuthor Commented:
Hi plusone3055:

jut had a quick look before I leave, that auto play won't work - same problem as me needing to stop the video when the div is not visible, it starts playing before a user cliks to open the video div.

Is there any way do you know to have it controlled by the open and close buttons?

0
 
HainKurtSr. System AnalystCommented:
have a look at this sample

get js from here and put into your web server and update the path on line 3
<html>
<head>
<script type="text/javascript" src="http://localhost/ee/js/swfobject/swfobject.js"></script>
</head>
<body>

<script>
var params = { allowScriptAccess: "always" };
swfobject.embedSWF("http://www.youtube.com/v/T39hYJAwR40&enablejsapi=1&playerapiid=ytplayer", "ytplayer", "425", "365", "8", null, null, params);
        
function playV(){
	var myPlayer = document.getElementById('ytplayer');
	ytplayer.playVideo();
	myPlayer.style.display="";
}
function pauseV(){
	ytplayer.pauseVideo();
}
function stopV(){
	var myPlayer = document.getElementById('ytplayer');
	ytplayer.stopVideo();
	myPlayer.style.display="none";
}
</script>

<a href="javascript:void(0);" onclick="playV();">Play</a> | 
<a href="javascript:void(0);" onclick="pauseV();">Pause</a> | 
<a href="javascript:void(0);" onclick="stopV();">Stop</a><br>

<div id="ytplayer">
<p>You will need Flash 8 or better to view this content.</p>
</div>

Open in new window

0
 
HainKurtSr. System AnalystCommented:
for auto start
<html>
<head>
<script type="text/javascript" src="http://localhost/ee/js/swfobject/swfobject.js"></script>
</head>
<body onLoad="setTimeout('playV()',1000);">

<script>
var params = { allowScriptAccess: "always", autoPlay: "1" };
swfobject.embedSWF("http://www.youtube.com/v/T39hYJAwR40&enablejsapi=1&playerapiid=ytplayer", "ytplayer", "425", "365", "8", null, null, params);
        
function playV(){
	var myPlayer = document.getElementById('ytplayer');
	ytplayer.playVideo();
	myPlayer.style.display="";
}
function pauseV(){
	ytplayer.pauseVideo();
}
function stopV(){
	var myPlayer = document.getElementById('ytplayer');
	ytplayer.stopVideo();
	myPlayer.style.display="none";
}
</script>

<a href="javascript:void(0);" onclick="playV();">Play</a> | 
<a href="javascript:void(0);" onclick="pauseV();">Pause</a> | 
<a href="javascript:void(0);" onclick="stopV();">Stop</a><br>

<div id="ytplayer">
<p>You will need Flash 8 or better to view this content.</p>
</div>

Open in new window

0
 
igloobobAuthor Commented:
Hi HainKurt,

I have tried that code to do it with flash, the movie loads but is not hidden within the pop up div, it just appears above the page from the start. Can't get the auto play bit to work but I can live with that. This is on a wordpress template so the body tag is in the header and therefore global, I tried adding the bit to the body tag anyway but didn't work.

Is using flash the only way you think it's possible to make the thing stop? Really I want the 'x' that closes the pop up box to be the button to stop the video as the you tube embed already has the stop button so people could use that. So using this flash method with the control buttons, if they clicked the 'x' to close the div, without hitting stop or pause in the new flash controls, would it not keep on playing still replicating the same problem?

Thanks again for the help
<body onLoad="setTimeout('playV()',1000);">




<!-- popup and contents -->
<div id="popupVid" style="position:absolute;top:130px;left:15px;width:500px;background-color:#D05F27;height:auto;visibility:hidden;z-index:200;">

<script type="text/javascript" src="http://c2946873.myzen.co.uk/dev/swfobject/swfobject.js"></script>


<script>
var params = { allowScriptAccess: "always", autoPlay: "1" };
swfobject.embedSWF("http://www.youtube.com/v/T39hYJAwR40&enablejsapi=1&playerapiid=ytplayer", "ytplayer", "425", "365", "8", null, null, params);
       
function playV(){
	var myPlayer = document.getElementById('ytplayer');
	ytplayer.playVideo();
	myPlayer.style.display="";
}
function pauseV(){
	ytplayer.pauseVideo();
}
function stopV(){
	var myPlayer = document.getElementById('ytplayer');
	ytplayer.stopVideo();
	myPlayer.style.display="none";
}
</script>

<a href="javascript:void(0);" onclick="playV();">Play</a> | 
<a href="javascript:void(0);" onclick="pauseV();">Pause</a> | 
<a href="javascript:void(0);" onclick="stopV();">Stop</a><br>

<div id="ytplayer">
<p>You will need Flash 8 or better to view this content.</p>
</div>

<br /><br />
   
  <a href="javascript:;" onClick="document.getElementById('popupVid').style.visibility='hidden';"><img class="close" src="http://c2946873.myzen.co.uk/dev/images/x-orange.gif" width="15" height="15" alt="close" /></a>

</div><!--end of popupVid -->

Open in new window

0
 
HainKurtSr. System AnalystCommented:
i dont understand why it is not working...

for attaching event to body onload for all browsers, have a look at this

http://stackoverflow.com/questions/1235985/attach-a-body-onload-event-with-js
<body>

<script type="text/javascript" src="http://localhost/ee/js/swfobject/swfobject.js"></script>

<p dir="ltr" style="margin-left: 20px; margin-right: 0px"></p>
<script>
var params = { allowScriptAccess: "always", autoPlay: "1" };
swfobject.embedSWF("http://www.youtube.com/v/T39hYJAwR40&enablejsapi=1&playerapiid=ytplayer", "ytplayer", "425", "365", "8", null, null, params);
       
function playV(){
	var myPlayer = document.getElementById('popupVid');
	ytplayer.playVideo();
	myPlayer.style.display="";
}
function pauseV(){
	ytplayer.pauseVideo();
}
function stopV(){
	var myPlayer = document.getElementById('popupVid');
	ytplayer.stopVideo();
	myPlayer.style.display="none";
}
</script>

<a href="javascript:void(0);" onclick="playV();">Play</a> | 
<a href="javascript:void(0);" onclick="pauseV();">Pause</a> | 
<a href="javascript:void(0);" onclick="stopV();">Stop</a><br>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;top:130px;left:15px;width:500px;background-color:#D05F27;height:auto;z-index:200;">

<div id="ytplayer">
<p>You will need Flash 8 or better to view this content.</p>
</div>


<br /><br />
   
<a href="javascript:;" onClick="stopV()"><img class="close" src="http://shop.eksuccessbrands.com/App_Themes/eksb/graphics/close.gif" width="15" height="15" alt="close" /></a>

</div>
<!--end of popupVid -->
<script>
setTimeout('playV()',1000);
</script>

Open in new window

0
 
igloobobAuthor Commented:
Hi HainKurt,

that still doesn't seem to work, the video is always visible above the main content rather than being hidden then appearing when the 'click here' is clicked to open up the popupVid div.

Any ideas why?

Also the script you added tot he close button, no longer has the command to hode the div, only to stop the movie, can that have both actions?







your 'close' code:

<a href="javascript:;" onClick="stopV()"><img class="close" src="http://shop.eksuccessbrands.com/App_Themes/eksb/graphics/close.gif" width="15" height="15" alt="close" /></a>

previously it was this:

  <a href="javascript:;" onClick="document.getElementById('popup').style.visibility='hidden';"><img class="close" src="http://c2946873.myzen.co.uk/dev/images/x-orange.gif" width="15" height="15" alt="close" /></









Full code:



    <!-- link to open popupVid -->
<p><a href="javascript:;" onClick="document.getElementById('popupVid').style.visibility='visible';">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;top:102px;left:15px;width:500px;background-color:#D05F27;height:auto;visibility:hidden;z-index:200;">

<script type="text/javascript" src="http://c2946873.myzen.co.uk/dev/swfobject/swfobject.js"></script>


<script>
var params = { allowScriptAccess: "always", autoPlay: "1" };
swfobject.embedSWF("http://www.youtube.com/v/T39hYJAwR40&enablejsapi=1&playerapiid=ytplayer", "ytplayer", "425", "365", "8", null, null, params);
       
function playV(){
	var myPlayer = document.getElementById('popupVid');
	ytplayer.playVideo();
	myPlayer.style.display="";
}
function pauseV(){
	ytplayer.pauseVideo();
}
function stopV(){
	var myPlayer = document.getElementById('popupVid');
	ytplayer.stopVideo();
	myPlayer.style.display="none";
}
</script>

<a href="javascript:void(0);" onclick="playV();">Play</a> | 
<a href="javascript:void(0);" onclick="pauseV();">Pause</a> | 
<a href="javascript:void(0);" onclick="stopV();">Stop</a><br>



<div id="ytplayer">
<p>You will need Flash 8 or better to view this content.</p>
</div>


<br /><br />
   
<a href="javascript:;" onClick="stopV()"><img class="close" src="http://c2946873.myzen.co.uk/dev/images/x-orange.gif" width="15" height="15" alt="close" /></a>

 
  

</div>
<!--end of popupVid -->
<script>
setTimeout('playV()',1000);
</script>

Open in new window

0
 
igloobobAuthor Commented:
Hello,

I changed visibility='hidden' to display='none' and that stops the video playing, unfortunately the video has then gone so if user was to click to open the div again nothing happens. Am I on the right track here maybe? How can I reactivate the link once the div is closed, is this possible?


<!-- link to open popupVid -->
<p><a href="javascript:;" onClick="document.getElementById('popupVid').style.visibility='visible';">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;visibility:hidden;z-index:200;">

<iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>


<br /><br />
   
  <a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';"><img class="close" src="http://c2946873.myzen.co.uk/dev/images/x-orange.gif" width="15" height="15" alt="close" /></a>

</div><!--end of popupVid -->

Open in new window

0
 
HainKurtSr. System AnalystCommented:
dont mix visible and display properties... just use display...
<!-- link to open popupVid -->
<p><a href="javascript:;" onClick="document.getElementById('popupVid').style.display='';">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">

<iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>


<br /><br />
   
  <a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';">
  <img class="close" src="x-orange.gif" width="15" height="15" alt="close" />
  </a>

</div><!--end of popupVid -->

Open in new window

0
 
igloobobAuthor Commented:
That has done it thank you HainKurt!! No auto play but I can live with that :)
0
 
igloobobAuthor Commented:
actually, I jumped the gun there, works in Firefox but not Safari, any ideas why?
0
 
HainKurtSr. System AnalystCommented:
any error message? what is not working, can you explain...
0
 
igloobobAuthor Commented:
hi,

no error message, it just keeps playing when the div is 'closed' exactly as it was doing originally.
0
 
igloobobAuthor Commented:
Hi,

below is the code where it is at now. It works perfect in Firefox, the video stops playing when the div is 'closed'. In Safari, IE and Chrome it keeps playing though.

Any more ideas on how to get this fixed?


<!-- link to open popupVid -->
<p><a href="javascript:;" onClick="document.getElementById('popupVid').style.display='';">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">

<iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>


<br /><br />
   
  <a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';">
  <img class="close" src="http://c2946873.myzen.co.uk/dev/images/x-orange.gif" width="15" height="15" alt="close" />
  </a>

</div><!--end of popupVid -->

Open in new window

0
 
igloobobAuthor Commented:
Anyone any ideas on the above?
0
 
HainKurtSr. System AnalystCommented:
I dont understand why you dont check my previous code... here again, this should be working fine in all browsers, hiding a running video does not stop it... and below code has play pause stop auto start functionality...
<body>

<script type="text/javascript" src="http://localhost/ee/js/swfobject/swfobject.js"></script>

<p dir="ltr" style="margin-left: 20px; margin-right: 0px"></p>
<script>
var params = { allowScriptAccess: "always", autoPlay: "1" };
swfobject.embedSWF("http://www.youtube.com/v/T39hYJAwR40&enablejsapi=1&playerapiid=ytplayer", "ytplayer", "425", "365", "8", null, null, params);
       
function playV(){
	var myPlayer = document.getElementById('popupVid');
	ytplayer.playVideo();
	myPlayer.style.display="";
}
function pauseV(){
	ytplayer.pauseVideo();
}
function stopV(){
	var myPlayer = document.getElementById('popupVid');
	ytplayer.stopVideo();
	myPlayer.style.display="none";
}
</script>

<a href="javascript:void(0);" onclick="playV();">Play</a> | 
<a href="javascript:void(0);" onclick="pauseV();">Pause</a> | 
<a href="javascript:void(0);" onclick="stopV();">Stop</a><br>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;top:130px;left:15px;width:500px;background-color:#D05F27;height:auto;z-index:200;">

<div id="ytplayer">
<p>You will need Flash 8 or better to view this content.</p>
</div>


<br /><br />
   
<a href="javascript:;" onClick="stopV()"><img class="close" src="http://shop.eksuccessbrands.com/App_Themes/eksb/graphics/close.gif" width="15" height="15" alt="close" /></a>

</div>
<!--end of popupVid -->
<script>
setTimeout('playV()',1000);
</script>

Open in new window

0
 
igloobobAuthor Commented:
Hi HainKurt,

sorry I have been away for a few days. Your previous code didn't work for what I wanted that's why I tried it and then started trying the other method I was using.

I have just tried again with your code above and it doesn't do what I need? I get the video already there without being in a hidden toggle div. The controls are above it and don't work when pressed. The close icon also does not close the panel??

Surely there is a method to get the one I have so close working (perfect in firefox),  I know I have seen it done before without flash.
<!-- link to open popupVid -->
<p><a href="javascript:;" onClick="document.getElementById('popupVid').style.display='';">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">

<iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>


<br /><br />
   
  <a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';">
  <img class="close" src="http://c2946873.myzen.co.uk/dev/images/x-orange.gif" width="15" height="15" alt="close" />
  </a>

</div><!--end of popupVid -->

Open in new window

0
 
igloobobAuthor Commented:
Hello all,

I now have this fixed and working in all browsers, someone on Stack Overflow helped me with it. below is the working code for those interested...


<script>
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
</script>

<p><a href="javascript:;" onClick="toggleVideo();">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
   <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
   <br /><br />
   <a href="javascript:;" onClick="toggleVideo('hide');">close</a>



 
</div><!--end of popupVid -->

Open in new window

0
 
igloobobAuthor Commented:
I received help on another site and this is the working solution.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now