Как скрыть iframe YouTube с помощью CSS

Question

Мой сайт оптимизирован для ПК и мобильных устройств.Большая часть моего поста содержит видео на YouTube.Мне нравится скрывать Youtube видео на моем мобильном сайте, так как это убивает дизайн.

Вот пример кода для встраивания Youtube ...

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

Я пытался использовать следующий CSS на мобильном сайте ...

iframe{
    display:none;
}

Этот код скрывает YouTubeвидео, а также реклама на мобильном сайте ...

Пожалуйста, помогите мне, как скрыть только видео YouTube с использованием CSS ???

Answer 1

Вы можете использовать медиазапросы:

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

Вы должны установить min-width на значение ширины устройств / мобильных телефонов, в которых вы хотите скрыть iframe.

Обратите внимание, что вы можете иметьнесколько медиа-запросов для разных размеров экрана.

Подробнее:

• http://www.css3.info/preview/media-queries/