HTML-隐藏iframe

如何隐藏iframe，但仍然加载它？播放youtube歌曲

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

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

---

谢谢

将可见性设置为隐藏。然而，它占用的空间不会倒塌

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

---

使用可使用宽度：0；身高：0；位置：绝对位置；与边界：0

因此，更新的代码将被删除

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

添加：

style=“位置：绝对；宽度：0；高度：0；边框：0；”

它将隐藏它，使媒体在后台播放，它也将折叠它的空间

更新的小提琴

---

通过结合这两个答案，我使用

高度：0

和

可见性：0

，因为这可以隐藏任何边框或框阴影。

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

---

只需将

样式设置为
显示：无；“

使用CSS的现有答案不适合我。即使使用了
display:none
I，iframe所在的位置也有一个4x4点。我必须做的是：

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

您可以使用CSS将iframe定位到页面以外的位置。这不会留下一个点或任何痕迹的框架

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



从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);
});

在样式中使用宽度0！是的，因为视频不会自动播放。使用youtube视频播放歌曲是一种不好的做法，你完全是在做错事，你知道youtube会倾向于播放商业歌曲吗？你的访客将如何关闭它？但我在这里编辑了一个答案，至少是为了在上下文中回答您。
？最新版本的Chrome for iframes已禁用autoplay=1
，因此此问题和答案不再相关。请您进一步解释，小点是问题所在。如果我编辑小提琴添加元素，我可以看到此iframe占用空间将
display:none的附加CSS代码放在上面和下面！重要信息
在其中如果您有
边框：无
，则不需要
边框：0
，
0
被
无
覆盖。这是获胜的答案。位置：绝对位置；让一切变得不同。
iframe {
    visibility: hidden;
    position: absolute;
    left: 0; top: 0;
    height:0; width:0;
    border: none;
}

 /**
 * 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);
});