2

我注意到，当使用任何隐藏 div 的典型方法时，当 youtube 视频在其中时，它在 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 并单击 off display none，视频将重新出现。现在，再次单击它以隐藏它，您会注意到它没有隐藏。为什么这会是一个问题，您可能想知道？好吧，我正在使用 youtube 视频的轮播，它通过隐藏不活动的视频来工作。在 5.1.7 版的 safari 中，视频根本不会消失。有谁知道解决这个问题？我试过用不透明度、高度、宽度和可见性隐藏它，但你仍然可以在 Safari 中看到它。有人有想法么？

4

5 回答 5

5

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

您是否尝试将 iframe 移出屏幕？

position: absolute;
left: -10000px;
top: -10000px;
于 2012-09-19T22:23:07.923 回答
1

像这样检查无证的 'wmode': 'transparent' ....

    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
        }
    });
于 2013-06-02T08:25:47.370 回答
1

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

iframe 中的 Youtube 视频未隐藏在 Safari 5.1 中

于 2012-11-29T14:32:01.087 回答
0

我尝试了一些方法来解决 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;
}
于 2013-05-08T14:37:41.350 回答
0

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

于 2012-09-19T22:20:03.357 回答