I've noticed that when using any typical method of hiding a div does not work in safari when a youtube video is in it. Look at this basic webpage-
<!DOCTYPE html>
<html>
<head><title>Safari Test</title></head>
<body>
<div id="test">
<iframe width="560" height="315" src="http://www.youtube.com/embed/Nry5zSJxG9k" frameborder="0" allowfullscreen></iframe>
</div>
<div id="safari" style="display: none;">
<iframe width="560" height="315" src="http://www.youtube.com/embed/Nry5zSJxG9k" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
The div is hidden now, but try try this- View this in safari and open the developer tools. If you go to the safari div and click off display none the video will reappear. Now, click on it again to hide it and you will notice that it does not hide. Why would this be an issue, you may wonder? Well I'm working with a carousel for youtube videos and it works by hiding inactive videos. In the most reason version of safari, 5.1.7, the videos simply will not go away. Does anyone know a fix for this? I've tried hiding it with opacity, height, width, and visibility but you can still see it there in Safari. Anyone have any ideas?
I've tried hiding it with opacity, height, width, and visibility but you can still see it there in Safari. Anyone have any ideas?
Did you try physically moving the iframe off the screen?
position: absolute;
left: -10000px;
top: -10000px;
Have you see this answer? It solved the same problem for me!
Youtube video inside iframe not hiding in Safari 5.1
checkout the undocumented 'wmode': 'transparent' like this ....
player = new YT.Player('player', {
height: '476',
width: '400',
videoId: 'yourvidhere',
playerVars: {
'autoplay': 0,
'controls': 0,
'rel': 0,
'showinfo': 0,
'modestbranding': 1,
'wmode': 'transparent'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
Empty src attribute of iframe when you hide div document.getElementById("iframetab").setAttribute("src",""); and set the attribute when you will display div
document.getElementById("iframetab").setAttribute("src","www.google.com");
give iframe id.
I tried a few routes to solve the issues safari has with iframes, this one appears to work while keeping consistent behavior on other browsers:
function Hide_Handler(oEvent)
{
try
{
$('#iframecontainer').css
({
background : {?} // Where ? == color, loading image, whatever..
})
.find('.iframeClass').css // http://stackoverflow.com/a/12503745/1257652
({
position : "absolute",
left : "-10000px",
top : "-10000px"
});
}
catch (ex) { }
}
function Show_Handler(oEvent)
{
try
{
$('#iframecontainer').css
({
background : "" // Where ? == color, loading image, whatever..
})
.find('.iframeClass').css // http://stackoverflow.com/a/12503745/1257652
({
position : "",
left : "",
top : ""
});
}
catch (ex) { }
}
and a little trick i found for scrolling the iframe as well as the reason for having an iframeContainer element:
#iframeContainer
{
height : (n)px; // Where n is a number
width : (n)px; // Where n is a number
overflow : auto;
}
.iframeClass
{
margin : 0px;
padding : 0px;
width : 100%;
height : 99%;
border : none;
overflow : hidden;
}
