HTML - 隐藏 iframe答案

【问题标题】：HTML - Hide an iframeHTML - 隐藏 iframe
【发布时间】：2014-08-21 20:10:04
【问题描述】：

如何隐藏 iframe，但仍会加载它？等等。用于播放 youtube 歌曲。

<iframe src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1" style="display: none;"></iframe>

这将隐藏 iframe，但它似乎不会加载 iframe。（歌曲未播放。）

谢谢

【问题讨论】：

在样式中使用宽度 0！
是的，因为视频不会自动播放。这是一种不好的做法，使用 youtube 视频播放歌曲是完全错误的，你知道 Youtube 会倾向于播放商业广告吗？您的访客将如何关闭它？但我在这里编辑了一个答案，至少在上下文中回答你。
?autoplay=1 已在 Chrome for iframe 的最新版本中被禁用，因此此问题和答案不再相关。

标签： html iframe

【解决方案1】：

使用可以使用宽度：0；高度：0；位置：绝对；和边框：0；

所以更新的代码将是！

<iframe src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1" style="position: absolute;width:0;height:0;border:0;"></iframe>

添加：

style="position: absolute; width:0; height:0; border:0;"

它会隐藏它，让媒体在后台播放，它也会把它折叠起来！

更新小提琴

http://jsfiddle.net/ygkvbphs/

【讨论】：

你能解释一下吗
小点是问题。
如果我编辑小提琴以在其上方和下方添加元素，我可以看到此 iframe 占用空间。
把display:none !important的附加CSS代码放在那里
如果有border: none，则不需要border: 0，0 会被none 覆盖。

【解决方案2】：

在添加绝对定位之前，我仍然遇到 iframe 占用空间的问题。然后它就不再占用空间了。

<iframe src="/auth/sso/" style="width: 0; height: 0; border: 0; border: none; position: absolute;"></iframe>

【讨论】：

这是成功的答案。位置：绝对；让一切变得不同。

【解决方案3】：

将可见性设置为隐藏。但是它占用的空间不会崩溃。

<iframe src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1" style="visibility: hidden;"></iframe>

【讨论】：

【解决方案4】：

使用 CSS 的现有答案对我不起作用。即使使用display:none，我最终还是在 iframe 所在的位置得到了一个 4x4 点。我必须做的是：

<iframe width="0" height="0" frameborder="0" src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1"></iframe>

【讨论】：

【解决方案5】：

只需设置style 的"display: none;"。

<iframe src="your url" style="display: none;"></iframe>

【讨论】：

【解决方案6】：

通过结合这两个答案，我使用height:0; 和visibility:0，因为这也可以隐藏任何边框或框阴影。

【讨论】：

【解决方案7】：

您可以使用 CSS 将 iframe 放置在页面之外并且不碍事。这不会留下点或框架的任何痕迹。

<iframe style="position: absolute; left: -900000px" src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1"></iframe>

【讨论】：

【解决方案8】：

从 iframe 中删除 src，然后重新添加 - 强制 iframe 加载：

 /**
 * Issue: iframe doesn't show because it's in a div that is display:none on load
 *
 * Solution: When the button is clicked to show the hidden div:
 *           in the iframe, copy the url from the src attribute
 *           then set the src attribute to ""
 *           then set the src attribute back to its original value.
 *           This forces the iframe to load.
 */

$('#show-div-button').click(function() {

    var iframe = $('iframe');
    var iframe_src = iframe.attr('src');

    iframe.attr('src', '');
    iframe.attr('src', iframe_src);
});

【讨论】：