Материал

Программирование / CSS·

Вставляем YouTube видео на сайт по ширине окна при помощи CSS

Довольно часто приходится вставлять видео с YouTube на свои Интернет-ресурсы. YouTube дает фиксированную высоту и ширину видео. А это не всегда хорошо, особенно для мобильной версии. В итоге получается так, посетитель ресурса открывает ваш сайт в смартфоне, а видео в нем заползает за экран. Как решить эту проблему?

Скачала рассмотрим код, который генерирует сам YouTube.

<iframe width="560" height="315" src="https://www.youtube.com/embed/WVkZEcr_2xs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

В данном коде подставляемое видео имеет ширину 560 точек, а высоту 315. Естественно, что мы можем изменить эти значения вручную. Но как быть с мобильной версией, версией для планшетов и т.п.?

Здесь на помощь приходит CSS. В первую очередь, чтобы наши параметры влияли только на iframe в тексте статей (основной части контента) нужно использовать общий класс. Пусть это будет класс article. HTML код статьи будет выглядеть следующим образом.

<div class="article">
<h1>Заголовок статьи</h1>
<p>Тексты</p>
...
<iframe width="560" height="315" src="https://www.youtube.com/embed/WVkZEcr_2xs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
...
</div>

Итак, для того чтобы игнорировать значения ширины в iframe от YouTube нам потребуется в наш CSS вставить следующий код.

.article iframe {
    width: 100% !important;
}

Вы можете изменить процент на любой другой, а также задать высоту блока при помощи параметра height.

Поделиться в соц. сетях: