Есть несколько способов сделать видео с YouTube адаптивным в постах на WordPress. Я расскажу о двух самых популярных.
- Используя плагин с поддержкой "Responsive Embeds":
- Первым делом, убедитесь, что у вас установлен и активирован плагин "Jetpack" (https://ru.wordpress.org/plugins/jetpack/). Этот плагин благодаря своему модулю "Responsive Videos" позволяет делать адаптивные видео-вставки.
- Включите модуль "Responsive Videos" в настройках плагина "Jetpack".
- После активации модуля переходите к редактированию страницы или поста, в котором нужно вставить видео.
- Вставьте URL видео с YouTube в контент страницы или поста, и плагин "Jetpack" автоматически добавит нужные CSS-классы для сделки видео адаптивным. Например:
Ваш контент страницы или поста...
<p>Вставленное видео: https://www.youtube.com/watch?v=YOUR_VIDEO_ID</p>
Ваш контент страницы или поста...
- Использование CSS:
- Откройте функционал редактирования страницы или поста в админке вашего сайта WordPress.
- Вставьте HTML-код видео с YouTube в контент. Например:
Ваш контент страницы или поста...
<div class="video-container">
<iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID"></iframe>
</div>
Ваш контент страницы или поста...
- Создайте CSS-правило для класса "video-container", чтобы сделать видео адаптивным. Например:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
- Сохраните изменения и просмотрите страницу или пост. Видео теперь должно быть адаптивным.
Независимо от выбранного метода, помните о том, что важно включить медиа запросы в стилях, чтобы видео адаптировалось к различным размерам экранов. Это можно сделать с использованием CSS-фреймворка, такого как Bootstrap, или написав собственные медиа запросы.