Как сделать адаптивным видео с ютуба в постах?

YouTube Видео

1 ответ

Как сделать адаптивным видео из ютуба в вордпрессе?
Добавляю в пост просто ссылку с ютуба, видео получается маленького размера, а мне нужно на 90% ширины

Может какой плагин свежий посоветуете?
Спасибо заранее

Дополнительно:

У Гутенберга есть блок Embed и YouTube, чем не устраивает?

Ответы:

Так добавляй его в контейнер, в котором пропиши адаптацию. Или добавляй не просто через копирование ссылки, а через кнопку "поделиться" под видео, там есть код в котором можно настроить размер окна

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Антон С. Ответ

Для YouTube в WordPress обычно не нужен отдельный плагин. Если вставить ссылку в Gutenberg-блок YouTube/Embed, WordPress сам создаст iframe. Вопрос с шириной и адаптивностью решается CSS-контейнером.

Современный вариант через aspect-ratio:

.entry-content iframe[src*="youtube.com"],
.entry-content iframe[src*="youtu.be"] {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.entry-content iframe[src*="youtube.com"], .entry-content iframe[src*="youtu.be"] { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; }

Если тема задаёт iframe фиксированную высоту, можно обернуть видео в контейнер:

&lt;div class="video-wrap"&gt;
  &lt;iframe src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;

.video-wrap {
    width: 90%;
    max-width: 960px;
    margin: 24px auto;
    aspect-ratio: 16 / 9;
}
 
.video-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.video-wrap { width: 90%; max-width: 960px; margin: 24px auto; aspect-ratio: 16 / 9; } .video-wrap iframe { width: 100%; height: 100%; border: 0; }

Если вставляете просто ссылку, проверьте, не ограничивает ли тему блок .wp-block-embed или .entry-content. Иногда видео маленькое не из-за YouTube, а из-за CSS темы, где для embed задан max-width: 500px.

Плагин имеет смысл только если нужны lazy load, preview-заглушки, GDPR/cookie-режим или массовая оптимизация PageSpeed. Для обычной адаптивной ширины достаточно CSS. После правки проверьте мобильную ширину 360-390 px, чтобы iframe не создавал горизонтальный скролл.

Если видео по-прежнему остаётся маленьким, откройте инспектор и посмотрите родительские блоки. Часто iframe честно занимает 100%, но его контейнер ограничен колонкой, старым shortcode или стилем темы. Тогда расширять нужно не сам iframe, а блок вокруг него: например .wp-block-embed, .wp-block-embed__wrapper или контейнер записи. Это лучше, чем вручную ставить width/height в каждом YouTube-коде.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 0 ответов

Как сделать адаптивным видео с ютуба в постах?

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно