如何使用 CSS 隐藏 youtube iframe答案

【问题标题】：How to hide youtube iframe using CSS如何使用 CSS 隐藏 youtube iframe
【发布时间】：2012-03-10 13:33:28
【问题描述】：

我的网站针对桌面和移动设备进行了优化。我的大部分帖子都有 youtube 视频。我喜欢在我的移动网站中隐藏 Youtube 视频，因为它会破坏设计。

这里是示例 Youtube 嵌入代码...

<iframe width="420" height="315" src="http://www.youtube.com/embed/0IiB2rNSFfM" frameborder="0" allowfullscreen></iframe>

我尝试在移动网站中使用以下 CSS...

iframe{
    display:none;
}

此代码隐藏 youtube 视频以及移动网站中的广告...

请帮助我如何使用 CSS 仅隐藏 youtube 视频？？？

【问题讨论】：

【解决方案1】：

您可以使用媒体查询：

@media screen and (min-width: 320px) { iframe { display:none; }}

您应该将 min-width 设置为您想要隐藏 iframe 的设备/手机的宽度值。

请注意，您可以针对不同的屏幕尺寸进行多个媒体查询。

更多信息：

【讨论】：

感谢您的回复...我希望此代码将隐藏我网站中的所有 iframe...但我只想隐藏 youtube iframe...我不想隐藏其他 iframe我的网站（广告）...
@user723805：你可以像class="youtube"这样对youtube iframe应用一个类，然后框架css，你可以这样做：iframe.youtube { display:none; }
我已经考虑过了，但问题是我有超过 100 个帖子，其中包含 850 个帖子中的视频......还有其他方法可以解决这个问题吗？？
@user723805：然后你可以像这样使用 jQuery，它会自动将该类添加到 youtube iframe：$('iframe[src*="youtube"]').addClass('youtube')，然后使用我在之前评论中显示的 css。