Hide videos in safari iframe

Asked

Viewed 80 times

-1

I have an iframe video from youtube inside a div and when I do Id in div, in safari, the video continues to appear. How can I fix this? It also happens to me that the video keeps playing when I hide the div, how can I stop the video?

html css iframe safari

2 answers

1

Strange, I don’t know what the structure of your html is but try to do:

<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 doesn’t work. add to .my_div, This is just a rush:

overflow:hidden;
height:0;

1

This is the way I usually do and never gave me any trouble.

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>

Browser other questions tagged html css iframe safari

You are not signed in. Login or sign up in order to post.