Главная страница » Як зробити адаптивне відео YouTube на CSS

Як зробити адаптивне відео YouTube на CSS

Розглянемо кілька способів, як зробити адаптивне відео 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. Встановіть відносне позиціювання для батьківського блоку та абсолютне для вбудованих елементів, таких як . Це дозволить відеоплеєру розтягуватись або стискатися залежно від розмірів контейнера. Створіть <div> контейнер із класом video-responsive та розмістіть у ньому код відеоролика.

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

Приклад 3. Застосовуємо метод document.querySelectorAll

Цей код використовує метод document.querySelectorAll для пошуку всіх елементів , які містять посилання на YouTube. Потім він проходить по кожному знайденому елементу та встановлює його ширину на 100% батьківського контейнера. Далі вираховується ширина елемента і встановлюється висота, щоб відповідати пропорціям відео 16:9.</p>

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.