Главная страница » Как сделать адаптивное видео YouTube на CSS

Как сделать адаптивное видео YouTube на CSS

Опубликовал(а): Артём Масальский

Обновлено: 27.03.2024

Рассмотрим несколько способов, как сделать адаптивное видео YouTube на CSS и поместить на сайт таким образом, чтобы оно сохраняло свои пропорции при изменении ширины экрана. Так как задать фиксированные размеры iframe с видео невозможно, придется использовать CSS-стили для достижения этой цели.

Адаптивный (резиновый) плеер YouTube

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

Пример 1. Добавляем обёртку для плеера в HTML-коде с помощью CSS

Чтобы сделать плеер YouTube адаптивным без использования JavaScript, можно добавить обёртку для плеера в HTML-коде с помощью CSS. Это позволит сохранить пропорции плеера при изменении размеров экрана.

add_filter( 'oembed_dataparse', 'adaptive_youtube_iframe', 10, 2 );

function adaptive_youtube_iframe( $return, $data ) {

	if ( 'YouTube' === $data->provider_name ) {
		$return = "<div class='youtube-container'>{$return}</div>";
	}

	return $return;
}

Пример 2. Используем `embed_oembed_html`

Можно воспользоваться embed_oembed_html. Этот способ срабатывает всегда, а не только при создании кэша встраивания. Это позволяет изменить HTML-код плеера непосредственно перед его выводом на странице, обеспечивая адаптивное поведение плеера при изменении размеров экрана.

add_filter( 'embed_oembed_html', 'adaptive_youtube_iframe', 10, 2 );

function adaptive_youtube_iframe( $embed_html, $url ) {

	$is_youtube = ( false !== strpos( $url, 'youtube.com' ) || false !== strpos( $url, 'youtu.be' ) );

	if ( $is_youtube ){
		$return = "<div class='youtube-container'>{$return}</div>";
	}

	return $return;

}

Далее, добавляем необходимые стили для обеспечения адаптивности плеера YouTube. Это можно сделать, например, в файле style.css вашей темы. Здесь определяются правила CSS для обёртки плеера YouTube, которые позволят ему корректно масштабироваться и сохранять соотношение сторон при изменении размеров экрана.

.youtube-container  {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.youtube-container  iframe,
.youtube-container  object,
.youtube-container  embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Простой и эффективный способ создания адаптивных видеоплееров с помощью CSS. Установите относительное позиционирование для родительского блока и абсолютное для встроенных элементов, таких как <iframe>. Это позволит видеоплееру растягиваться или сжиматься в зависимости от размеров контейнера. Создайте <div> контейнер с классом video-responsive и разместите в нем код видеоролика.


<div class="video-responsive">
  <iframe width="auto" height="auto" src="ссылка на видео" frameborder="0" allowfullscreen></iframe>
</div>

Пример 3. Применяем метод `document.querySelectorAll`

Этот код использует метод document.querySelectorAll для поиска всех элементов <iframe>, которые содержат ссылку на YouTube. Затем он проходит по каждому найденному элементу и устанавливает его ширину на 100% от родительского контейнера. Далее, высчитывается ширина элемента и устанавливается высота, чтобы соответствовать пропорциям видео 16:9.

document.querySelectorAll('iframe[src*="youtube.com"]').forEach(function(video) {
    video.setAttribute('width', '100%');
    let videoWidth = video.offsetWidth;
    video.style.height = videoWidth * 9 / 16 + 'px';
});

В итоге

Чтобы сделать адаптивное видео YouTube на CSS под размеры родительского блока достаточно предварительно создать класс и определить необходимые свойства для создания «резинового» контейнера. Этот класс будет применяться ко всем вариантам вставки видео, таким как iframe, object и embed. Таким образом, мы избавляемся от необходимости задавать стили для каждого варианта отдельно и упрощаем процесс.

Видео — Адаптивное видео с YouTube правильно (HTML, CSS, JS)

На заметку! Существуют разные методы применения принципов CSS для создания плавных анимаций и эффектов на веб-сайте. Узнайте из новой статьи на нашем портале, как может применяться с различными эффектами а нимация появления блока с помощью CSS.