Как сделать видео на сайте адаптивным

Независимо от того, вставляете ли вы на сайт видео html5 тегом video или встраиваете с ютуба через iframe, оно должно хорошо адаптироваться под различные устройства.

Вставить и адаптировать HTML5 видео

Для вставки видео на сайт, нужно в HTML разметке внутри блока обертки, прописать тег video, внутри которого через src подключить видео-ролик. Атрибут controls, дает возможность управлять видео. Атрибут poster указывает ссылку на превью-картинку к видео-ролику. Впрочем можно обойтись и без картинки, в таком случае, браузер покажет в плейере первый кадр видео.

<div>
    <video src="video/travaho.mp4" controls poster="video/travaho.jpg">
        Ваш браузер не поддерживает HTML5 видео.
    </video>
</div>

Если оставить у видео фиксированные размеры, то на экране с разрешением меньше, чем 640 пикселей по ширине, появится горизонтальная полоса прокрутки и может поломаться верстка.

Зададим классу movie ширину 100%, а высоту пусть браузер вычислит автоматически. Ограничим ширину плеера до 500 пикселей.

.movie {
    width: 100%;
    height: auto;
    margin: 0 auto; // выравнивает по центру по вертикали
    display: block;
    max-width: 500px;
}

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


Адаптивное видео с Ютуба

Все-таки на большинстве сайтах, мы видим встроенное видео с Ютуба. Как вы понимаете, в HTML коде для встраивания видео, фиксированные размеры. Значит, сделать его адаптивным – задача веб-мастера.

<iframe src="https://www.youtube.com/embed/fn_JrXerhUg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Мы не можем напрямую повлиять на ширину iframe, как в первом случае. Зато можем создать блок-контейнер и задать ему CSS правила.

<div>сюда вставить код iframe</div>

Чтобы видео адаптировалось под ширину блока-контейнера с сохранением пропорций, зададим классу movie-container следующие свойства:

.movie-container {
    position: relative;
    padding-bottom: 56.25%; // сохраняет пропорции
    height: 0;
    overflow: hidden;
    display: block;
}

Мы расположили iframe относительно контейнера и приняли меры предосторожности на случай переполнения контейнера.

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

Создадим ещё один блок-обертку, который ограничит размеры и отцентрирует видео.

.movie-fixed {
    max-width: 500px;
    margin: auto;
}

HTML разметка целиком.

<div>
    <div>
        <iframe src="https://www.
youtube.com/embed/fn_JrXerhUg" frameborder="0" allow="accelerometer;
        <autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>

Адаптивное видео на Bootstrap

У Bootstrap уже есть готовые классы, чтобы видео было адаптивным. Один класс присваивается самому объекту:

<video>
<iframe>
<object>
<embed>

Два других класса – блоку-обертке.

<div>
    <iframe src="URL" allowfullscreen></iframe>
</div>
  • Создано 25.09.2019 10:28:07
  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk. com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Как встроить адаптивное видео YouTube на веб-сайт

Встраивайте адаптивное видео YouTube с помощью Bootstrap

Адаптивное видео YouTube с использованием Fancybox

Lite YouTube встраивает

Статьи по Теме

Размещение видео с YouTube на веб-сайтах стало обычным явлением. YouTube предоставляет код iframe для встраивания видео на веб-сайты. Однако видео, отображаемое с помощью этого кода iframe, не отвечает. Это означает, что на небольших устройствах, таких как мобильные устройства и планшеты, ваше видео может выглядеть не лучшим образом.

На самом деле, ваши встроенные видео YouTube должны реагировать на запросы пользователей. В этой статье мы узнаем, как встроить адаптивные видеоролики YouTube на ваш сайт.

Я нашел 3 возможных способа достижения конечного результата. Посмотрим по порядку.

Встраивайте адаптивное видео YouTube с помощью Bootstrap

Bootstrap – самый популярный интерфейсный инструмент, помогающий разрабатывать адаптивные сайты. Это также простое решение, позволяющее сделать ваше видео на YouTube адаптивным.

Чтобы начать, вам сначала нужно включить файл CSS Bootstrap следующим образом. Если вы уже используете Bootstrap в своем проекте, пропустите этот шаг.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

Затем используйте следующий HTML-код, чтобы встроить видео с помощью Bootstrap.

<div>
    <div>
        <iframe src="https://www.youtube.com/embed/VIDEO_ID?rel=0"></iframe>
    </div>
</div>

Замените заполнитель VIDEO_ID фактическим идентификатором видео. Попробуйте, и вы увидите, что ваше видео отлично работает на небольших устройствах.

Вы можете прочитать об этом методе встраивания в документации Bootstrap.

Адаптивное видео YouTube с использованием Fancybox

Этот вариант немного отличается. Здесь вместо того, чтобы напрямую отображать видео, мы показываем миниатюру видео YouTube. А затем щелкнув миниатюру, ваше видео начнет воспроизводиться во всплывающем окне. Это можно сделать с помощью коробки фантазии.

Чтобы использовать Fancybox, вам необходимо включить на свой веб-сайт следующие файлы CSS и JS.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>

После этого разместите код ниже, и все готово.

<a data-fancybox="" href="https://www. youtube.com/watch?v=VIDEO_ID">
    <img src="http://i3.ytimg.com/vi/VIDEO_ID/hqdefault.jpg" />
</a>

Lite YouTube встраивает

В первом методе мы использовали код iframe. При использовании iframe браузеру необходимо загрузить около 800 КБ данных для рендеринга видео.

Используя fancybox, вы можете уменьшить эту нагрузку. Но опять же вы должны включить их CSS и JS. Чтобы уменьшить нагрузку на сервер, рекомендуется добавлять эти файлы через CDN.

Работая над этой темой, я наткнулся на статью, в которой по-другому объясняется встраивание видео с YouTube. Ему не нужно использовать iframe при загрузке страницы или включать какие-либо файлы.

В статье представлен код, который любой может легко добавить в свое приложение. Следуйте статье Lite YouTube Embeds и добавьте код, как предлагается.

Это 3 возможных способа встраивания адаптивного видео YouTube. В зависимости от ваших требований вы можете выбрать любое из решений.

Статьи по Теме
  • Как получить список YouTube-видео вашего канала
  • Как использовать YouTube API для загрузки видео на канал YouTube
  • Как получить теги видео YouTube с помощью API YouTube

Источник записи: artisansweb.

net

Отзывчивая вставка Youtube | Сделать видео на YouTube адаптивным |

автор: John Surdakowski01.06.2020

Краткое изложение Учебное пособие о том, как сделать видео на Youtube адаптивным с помощью CSS и HTML. Адаптивные встраивания Youtube используют iframes, CSS и HTML, чтобы сделать ваши видео на Youtube адаптивными.

Встроить адаптивное видео YouTube

Вы когда-нибудь пытались сделать видео YouTube адаптивным? Если это так, это может быть несколько сложно. Я столкнулся с небольшой проблемой при добавлении видео с YouTube в один из моих постов в блоге о созданном нами веб-сайте Childish Gambino.

Поскольку этот веб-сайт полностью адаптивен, мне нужно было изменить размер видео на YouTube в зависимости от размера браузера или ширины устройства. Однако, когда я добавил код для встраивания, видео имело фиксированную высоту и ширину. (угу!) Это выглядело хорошо на настольных компьютерах, но сильно портило дизайн при просмотре на мобильном устройстве. Я хотел узнать, как сделать видео на YouTube мобильным. Поэтому нам нужен был адаптивный код для встраивания видео на YouTube.

Можно было бы подумать, что видео со 100%-ной шириной автоматически изменят размер до окружающего контейнера. Ну, это не так. Удивительно, но Youtube автоматически не имеет адаптивного кода для встраивания.

На самом деле исправить было очень просто. Вот как сделать видео на YouTube мобильным:

Вам нужно будет обернуть адаптивный код для встраивания YouTube в div и указать нижний край от 50% до 60%. Затем укажите для дочерних элементов (iframe, встраивание объекта) ширину 100%, высоту 100% с абсолютным положением. Это заставит встроенные элементы автоматически расширяться на всю ширину. Потрясающий! Именно то, что нам нужно.

Сначала вам нужно будет добавить следующее в вашу таблицу стилей.

УС

.видео-контейнер { положение: родственник; обивка-дно: 56,25%; отступ сверху: 30px; высота: 0; переполнение: скрыто; }

. video-контейнер iframe, объект .video-контейнера, .видео-контейнер для встраивания { положение: абсолютное; сверху: 0; слева: 0; ширина: 100%; высота: 100%; }

Затем отредактируйте код для встраивания, добавив немного HTML. Примечание. Этот адаптивный код для встраивания YouTube был обновлен в 2020 году, чтобы быть более совместимым и соответствовать передовым методам встраивания видео Youtube для адаптивного дизайна.

HTML

Теперь, если адаптивная вставка YouTube работает, ваши видео должны быть адаптивными и готовыми к просмотру на планшетах и ​​мобильных устройствах.

Пример встраивания адаптивного видео YouTube

В качестве рабочего примера посетите нашу домашнюю страницу со встроенным адаптивным видео.

Мы изучаем различные способы встраивания видео с YouTube для адаптивного дизайна. Ознакомьтесь с нашим кейсом для серфинга O’neill, который использует видео Vimeo для встраивания адаптивных видео, которые воспроизводятся автоматически.

Avex — цифровое агентство Нью-Йорка, специализирующееся на создании потрясающих веб-сайтов и привлекательного контента. Узнать больше.

Обновление: меня попросили написать статью для .Net Magazine об адаптивной вставке Youtube и о том, как сделать видео YouTube адаптивным. Статья более глубокая, предлагая некоторые альтернативы для встраивания адаптивных видео в ваш веб-дизайн. Ознакомьтесь с ней в выпуске № 247, опубликованном 8 октября 2013 г.

Обновление от 15 декабря 2016 г.: Эта статья была обновлена ​​для улучшения качества с момента публикации. Кроме того, упомянутая выше статья также была опубликована на CreativeBloq, на Responsive Youtube Embed.

Обновление от 24 августа 2020 г.: эта статья была первоначально опубликована в 2012 г. и была обновлена, чтобы включить вспомогательную информацию.

Сделайте видео встроения на YouTube, отзывчивыми с использованием чистого HTML и CSS

Zach

(

248

)