Статья №64
Узнайте как вставить во фрейме в адаптивный сайт. Но сначала подпишитесь на наш Телеграм-канал, узнавайте о таких вещах раньше остальных.
Почему мы пишем об интеграции видео?
Мы — разработчики IT-продуктов. Мы — студия ReConcept. Мы профессионально запускаем недорогие сайты на Tilda, разрабатываем интернет-магазины и функциональные сайты-сервисы. Напишите нам в WhatsApp, когда вам это понадобится:
Как адаптировать видео с YouTube
Задача: вставить видео с YouTube на адаптивный сайт. Сайт меняет ширину на разных разрешениях экрана и нельзя задать размеры iframe с видео. Нужно сделать видео нормальных пропорций на всю ширину сайта.
Решение
Внимание! Есть свежее решение от Андрея из комментариев:
iframe { width: 100%; height: auto; aspect-ratio: 16/9; }Для iframe нужно указать высоту, иначе браузеры выставляют для iframe высоту 150px. Видео загрузится узкой горизонтальной полосой и проиграется в поле размером в половину спичечного коробка. Почти все браузеры отображают iframe, canvas, embed и object с шириной 300px и высотой 150px по высоте, если не указать размеры.
- Прокачайте ваши навыки в CSS: 20 советов профессинальной вёрстки сайтов
- Сайты 5-го поколения: продвижение сайта без SEO и контекстной рекламы
Рекомендуем поместить iframe в блок div с заданными пропорциями. А видео абсолютно позиционировать в этом div. Видео в iframe будет увеличиваться и уменьшаться вслед за родительским div и сохранять нормальные пропорции.
- Помещаем фрейм видео в div с классом "video".
- Указываем в CSS:
.video {position:relative;padding-bottom:56.25%<!--пропорции видео 16:9-->;padding-top:25px;height:0;}
.video iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
Статьи про видео
Как снимать видео-отзывы, которые действительно продают (тонкости, которых вы не знали!)
10 нейронных сетей для создания видео
Как бренду начать видеомаркетинг
Как видео на страницах влияет на SEO сайта
7 способов смонтировать убийственное маркетинговое видео
РАЗВЕРНУТЬ СТАТЬИ ПО ТЕМЕ
Веб-разработкаПрогрессивный сайт. Часть вторая.
3570 0
Веб-разработкаПрисылайте нам свои заполненные брифы и получайте лучшие услуги и цены!
7087 0
Веб-разработкаНе используйте Lorem Ipsum, это убивает ваш дизайн!
14038 6
Веб-разработкаПочему веб-дизайнер будет решать в 2024-м году сколько заработает ваша компания?
1648 0
Д
е
й
с
т
в
у
й
!
Оставьте ваши контакты и мы ответим в течение 10 минут.
Ваша заявка принята!
Рассылка Reconcept, подпишитесь на наш полезный блог
Ваша заявка принята!
Комментарии (43)
Оставьте ваш комментарий@media (max-width: 767px) {
.video {
margin-left: -30px;
margin-right: -30px;
padding-top: 25px;
top: 10px;
}
}
.video {position:relative;padding-bottom:56.25%;/*пропорции видео 16:9 */padding-top:; height:0;}
.video iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
Не работает, если идет два видео подряд. Например:
Мне тоже нужно вставлять несколько видео подряд, а с этим кодом получается гармошка наложенных друг на друга видео
Стили прикручивайте по крайней мере к той странице, на которой будет видео. Если таких несколько на сайте, то оптимально эти стили завести в общую таблицу CSS, чтобы не дублировать каждый раз.
Пытаюсь осущиствить вставку с ivi