Css 无法在safari中隐藏youtube iFrame？_Css_Iframe_Safari_Youtube_Visibility

Css 无法在safari中隐藏youtube iFrame？

css iframe safari youtube

Css 无法在safari中隐藏youtube iFrame？,css,iframe,safari,youtube,visibility,Css,Iframe,Safari,Youtube,Visibility,我注意到，当使用任何典型的隐藏div的方法时，如果在safari中有youtube视频，则div不起作用。看看这个基本的网页- <!DOCTYPE html> <html> <head><title>Safari Test</title></head> <body> <div id="test"> <iframe width="560" height="315" src="http://www.

我注意到，当使用任何典型的隐藏div的方法时，如果在safari中有youtube视频，则div不起作用。看看这个基本的网页-

<!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>


狩猎试验

div现在是隐藏的，但是试试这个-在safari中查看这个并打开开发者工具。如果转到safari div并单击off display none，视频将重新出现。现在，再次单击它以隐藏它，您将注意到它没有隐藏。你可能会想，为什么这会成为一个问题？我正在使用youtube视频传送带，它通过隐藏非活动视频来工作。在safari 5.1.7的最合理版本中，视频不会消失。有人知道这个问题的解决方法吗？我尝试过用不透明度、高度、宽度和可见性来隐藏它，但你仍然可以在Safari中看到它。有人有什么想法吗？

隐藏div

document.getElementById（“iframetab”）.setAttribute（“src”）时清空iframe的src属性

并设置显示div时的属性

document.getElementById（“iframetab”）.setAttribute（“src”、“www.google.com”）

给出iframe id
我尝试过用不透明度、高度、宽度和可见性来隐藏它，但你仍然可以在Safari中看到它。有人有什么想法吗
您是否尝试将iframe从屏幕上物理移动
position: absolute;
left: -10000px;
top: -10000px;

你看到这个答案了吗？它为我解决了同样的问题
我尝试了几种方法来解决safari在iFrame中存在的问题，这一种似乎可以在其他浏览器上保持一致的行为：
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) { }
}

我发现了一个滚动iframe的小技巧，以及使用iframeContainer元素的原因：
#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;
}

签出未记录的“wmode”：“透明”如下所示
    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
        }
    });