css - 无法在 safari 中隐藏 youtube iframe?

标签 css iframe safari youtube visibility

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

最佳答案

I've tried hiding it with opacity, height, width, and visibility but you can still see it there in Safari. Anyone have any ideas?

您是否尝试过将 iframe 移出屏幕?

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

关于css - 无法在 safari 中隐藏 youtube iframe?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12503598/

相关文章:

javascript - SVG 使用和 jQuery 上的 Mouseenter/Mouseleave

javascript - 如何让页脚固定在底部?

iphone - iphone safari 中的部分黑色背景

javascript - Mobile Safari 上的惯性滚动事件

css - css 中的硬边渐变?

c# - ASP.net 菜单 - 如何在悬停时更改弹出图像

javascript - 检测 iframe 和元素何时完全渲染,而不仅仅是加载 html

javascript - Thickbox 或类似窗口高度为 100% 的东西

html - 在 Mobile Chrome 的 iframe 中显示 PDF,而不是下载到设备

javascript - RequestAnimationFrame 在 Safari 中不可用 - 如何制作流畅的动画?