I have a YouTube iframe video inside a div and when I hide in the div on the safari, the video continues to appear. How can I resolve this? It also happens to me that the video continues to play when I hide the div, how can I stop the video?
I have a YouTube iframe video inside a div and when I hide in the div on the safari, the video continues to appear. How can I resolve this? It also happens to me that the video continues to play when I hide the div, how can I stop the video?
This is the way I usually do and it has never given me any problems.
function toggleVideo(state) {
var div = document.getElementById("vid");
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":""}','*');
}
<p><a href="javascript:;" onClick="toggleVideo();">Ver</a> </p>
<div id="vid" style="position:absolute;display:none;">
<iframe width="500" height="315" src="https://www.youtube.com/embed/fwVUO_Nk0oE"frameborder="0" allowfullscreen></iframe>
<br /><br />
<a href="javascript:;" onClick="toggleVideo('hide');">Esconde</a>
</div>
Strange, I do not know what the structure of your html is but try to do it:
<div class="my_vid">
<iframe....></iframe>
</div>
CSS:
.my_vid {
width:600px;
display: none;
height:400px;
}
.my_vid iframe {
height:100%;
width:100%;
display: block;
}
if it does not work. add to .my_div
, this is just a desrrasque:
overflow:hidden;
height:0;