Адаптивный плеер для сайта

В последние годы количество устройств для доступа в интернет неисчеслимо возрасло. Новые технологии постоянно увеличивают разрешения экранов. Всвязи с этим адаптивность сайта под все возможные устройства очень важна. В этой заметке мы на примере рассмотрим как на нашу страницу вставить адаптивный плеер от youtube

Задача: Сделать адаптивный кроссбраузерное блок для вставки видео из iframe на сайте.

Наверно самое популярное соотношение сторон в видео плеере это 16:9. Вот на это соотношение я и буду равняться в своей задачке. В процентном соотношении давайте посчитаем. 9*100%/16=56,25%. Вот высота блока нашего плеера должна быть 56% от его ширины. Давайте воплотим это в css. Будем использовать padding-bottom: 56.25% свойство css. Создадим один div который будет позиционироваться position: relative и браузер будет сам рассчитывать ему высоту исходя из ширины. А в этот div вставим iframe с видео, который будет position: absolute и раздвигаться на всю высоту и ширину родительского блока.

Листинг

           .videobox {
            position: relative;
            padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 */
            height: 0;
            overflow: hidden;
          }
          .videobox iframe {
              position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-width: 0;
            outline-width: 0;
          }