Адаптивные iframe в WordPress

Наверняка многие замечали, что на сайтах с адаптивной версткой при изменении ширины браузера картинки меняют свою высоту пропорционально ширине, а Ютуб-плеер нет.

Для этого мы используем примерно такой код:

.entry-content img {
  max-width: 100%;
  height: auto;
}

И это правильно. Браузер начинает автоматически подбирать высоту для тегов <img>. К сожалению, написать тоже самое для iframe не получится. height: auto; заставит их «схлопнуться» по высоте и на странице мы ничего не увидим.

.entry-content iframe {
  max-width: 100%;
  /**
   * Нельзя написать height: auto, т. к. это приведет
   * к схлопыванию iframe по высоте и его не будет видно.
   */
}

Получается что iframe будет менять лишь свою ширину и на экранах с небольшой шириной все будет выглядеть несколько печально и о соотношении сторон 16 к 9 можно забыть.

iframe, который не хотел менять высоту

iframe, который не хотел менять высоту

Решение есть внутри Bootstrap начиная с версии 3.?.? (не помню точно).

Идея в том, чтобы сделать некоторый пустой контейнер, высоту которого сделать адаптивной за счет пэддинга в процентах. Педдинг будет рассчитываться относительно ширины — как раз то, что нам надо. А iframe будет абсолютно позиционироваться внутри, занимая все пространство внутри.

wordpress.com что-то 10 раз сломал мне этот код в редакторе TinyMCE, поэтому в виде гиста:

Остается сделать так, чтобы WordPress оборачивал все Ютуб-плееры в дополнительный div.

Напоследок клип Shake It Off от Тейлор Свифт.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s