Адаптивное видео youtube: Адаптивный iframe для Youtube плеера

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

Независимо от того, вставляете ли вы на сайт видео 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 адаптивным • Yoast

При встраивании видео YouTube на свой веб-сайт вы, вероятно, обнаружили незначительную, но очень досадную проблему: встраивание YouTube изначально не отвечает. Это означает, что когда вы просматриваете свою веб-страницу, например, на мобильном устройстве, размер видео не изменяется должным образом вместе с остальными элементами страницы. Это может негативно повлиять на дизайн и удобство использования вашего сайта. Так почему же это происходит и что с этим делать?

Почему видео на YouTube не адаптируются 

Стандартные вставки YouTube, такие как приведенный ниже, используют iFrames для создания встроенного видеоплеера:

Преимущество использования iFrames? Это простой фрагмент HTML. Кроме того, он позволяет встраивать YouTube в самые разные варианты использования, приложения и системы управления контентом. YouTube также может обновлять существующие встроенные видео, например, новыми стилями проигрывателя или рекламными скриптами со стороны сервера, не требуя от пользователей изменения кода на своих веб-сайтах. Это работает, потому что iFrame по существу действует как окно на другую страницу.

Иногда видео не отображаются должным образом при определенных размерах экрана. Видео выше не помещается на экране.

Но есть и обратная сторона. Использование iFrames может замедлить загрузку видео YouTube на любой странице. Это также может означать, что видео не всегда видны при первой отрисовке, поскольку браузеру необходимо найти и загрузить iFrame, прежде чем он сможет загрузить видео. Наконец, что еще более неприятно, без CSS или Javascript не существует собственного способа адаптации видео YouTube к контейнеру. Вот почему для встраивания указывается размер (по умолчанию 560 x 315).

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

Метод 1: Немного пользовательского CSS

Самый простой способ использования CSS для создания адаптивных встраиваний — создать класс со свойством «соотношение сторон». Это свойство позволяет указать соотношение сторон создаваемого класса, чтобы его размер всегда изменялся внутри контейнера в соответствии с этим соотношением сторон. Учитывая, что все встраиваемые видео на YouTube представлены в формате 16×9соотношение сторон, это означает, что вы можете использовать это свойство, чтобы убедиться, что все масштабируется соответствующим образом.

Давайте посмотрим, как работает первый метод.

Сначала создайте класс, например «youtube-video». Затем присвойте ему соотношение сторон, установленное на 16/9, с шириной 100%.

 . youtube-видео {
  соотношение сторон: 16/9;
  ширина: 100%;
} 

Затем вам нужно будет применить этот класс к любому встраиванию YouTube в код, удалив при этом ширину и высоту по умолчанию.

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

Метод 2: Блоки Гутенберга в адаптивных темах

Некоторые темы WordPress, такие как Inspiro и адаптивные, имеют функции, которые автоматизируют отзывчивость для встраивания видео. Поэтому, если вы готовы изменить свою тему и шаблоны, просто установите один из них. Эти темы имеют правило CSS, аналогичное первому методу, встроенному в тему. Затем это правило будет применяться к определенным блокам и отображаться в теме.

Другими словами: если вы используете блок «видео» Гутенберга, куда вы вставляете URL-адрес видео YouTube, которое хотите встроить, ваши видео останутся адаптивными.

Однако сначала обязательно протестируйте эти темы на своем веб-сайте. Конкретная реализация может не работать идеально с вашими видео.

Способ 3: с плагином Yoast Video SEO

Если вы пользователь WordPress, самый простой и быстрый способ решить эту проблему — использовать плагин Yoast Video SEO. В дополнение к автоматическому включению метаданных, которые повышают рейтинг ваших видео в результатах поиска Google, JavaScript автоматически изменяет размер встроенного видео для любого устройства и размера браузера. Помимо размера контейнера, видео будет регулировать свою высоту и ширину по мере масштабирования страницы. Так что вам не нужно беспокоиться о внедрении пользовательского CSS или утомительном тестировании браузера!

Кроме того, плагин Yoast Video SEO использует асинхронный JavaScript, чтобы максимально ускорить время загрузки видео на YouTube. Это гарантирует, что ваши видео будут доставлены наилучшим образом, гарантируя высокую скорость воспроизведения и вовлеченность. Плагин стоит 79 долларов в год, его установка и настройка занимает всего пару минут, и он гарантирует, что вам никогда больше не придется беспокоиться об адаптивных видео.

Резюме

Видео — отличный инструмент для использования на вашем веб-сайте. Люди любят их! Но если они не масштабируются с остальной частью вашего сайта, они могут выглядеть неуклюже. К счастью, есть несколько способов обеспечить адаптивность встроенных видео. Либо с небольшим количеством пользовательского CSS, либо установив полезный плагин, такой как Yoast Video SEO, вы можете убедиться, что ваши видео на YouTube правильно изменяются. Вы также можете изменить свою тему на ту, которая автоматически реагирует на видео. Если у вас есть дополнительные вопросы или предложения, пожалуйста, оставляйте их в комментариях.

Подробнее: YouTube или ваш собственный сайт: что лучше для видео SEO? »

Фил Ноттингем

Фил Ноттингем (Phil Nottingham) — маркетолог, специализирующийся на поисковой оптимизации видео, стратегии бренда и поисковой оптимизации.

Далее!

Адаптивная вставка 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% с абсолютным положением. Это заставит встроенные элементы автоматически расширяться на всю ширину. Потрясающий! Именно то, что нам нужно.

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

CSS

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

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

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

HTML

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

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

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

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