Unable to hide youtube iframes in safari?

2019-07-16 14:25发布

站内问答 / HTML/CSS
1611 5 6

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?

5条回答
叼着烟拽天下
2楼-- · 2019-07-16 14:37

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;
查看更多
0人赞 添加讨论(0) 举报
劫难
3楼-- · 2019-07-16 14:40

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;
}
查看更多
0人赞 添加讨论(0) 举报
闹够了就滚
4楼-- · 2019-07-16 14:42

Have you see this answer? It solved the same problem for me!

Youtube video inside iframe not hiding in Safari 5.1

查看更多
0人赞 添加讨论(0) 举报
一夜七次
5楼-- · 2019-07-16 14:47

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.

查看更多
0人赞 添加讨论(0) 举报
放我归山
6楼-- · 2019-07-16 14:57

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
        }
    });
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)