【问题标题】: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 视频???

【问题讨论】:

    标签: css iframe 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。
    猜你喜欢
    • 2014-05-05
    • 2018-05-18
    • 2014-07-09
    • 2012-01-29
    • 1970-01-01
    • 2012-09-12
    • 2019-06-19
    • 1970-01-01
    • 2023-03-08
    相关资源
    最近更新 更多