Question

我注意到当使用youtube视频时，使用任何隐藏div的典型方法都不适用于safari。看看这个基本网页 -

<!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并单击关闭显示，则视频将重新出现。现在，再次点击它以隐藏它，你会发现它没有隐藏。你可能想知道为什么这会成为一个问题？好吧，我正在为youtube视频使用旋转木马，它通过隐藏非活动视频来工作。在safari的最主要版本5.1.7中，视频根本不会消失。有谁知道解决这个问题？我尝试用不透明度，高度，宽度和可见度隐藏它，但你仍然可以在Safari中看到它。有人有什么想法吗？

Answer 1

我尝试用不透明度，高度，宽度和可见度隐藏它，但你仍然可以在Safari中看到它。有人有什么想法吗？

您是否尝试过将iframe从屏幕移开？

position: absolute;
left: -10000px;
top: -10000px;

Answer 2

你看到这个答案吗？它为我解决了同样的问题！

Youtube video inside iframe not hiding in Safari 5.1

Answer 3

结帐未记录的'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
        }
    });

Answer 4

隐藏div document.getElementById("iframetab").setAttribute("src","");时iframe的空src属性，并在显示div时设置属性 document.getElementById("iframetab").setAttribute("src","www.google.com");
给iframe id。

Answer 5

我尝试了一些路线来解决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;
}

无法在Safari中隐藏youtube iframe？

5 个答案: