Размещение видео с YouTube на сайте. Адаптация к просмотру на мобильных устройствах посредством фрейворка Bootstrap

Адаптивное видео на сайт с YouTube

Размещение адаптивного к просмотру на мобильных устройствах видео на сайте. Используем в качестве примера сервис YouTube.
Единственным условием является подключение на сайте фрейворка Bootstrap.

Копируем код с YouTube используя кнопку "Поделиться", далее из всплывшего окна нажимаем ссылку слева от кнопок соцсетей "Встроить".
Код должен иметь примерно такой вид, как показано ниже без окаймляющих DIV:
<div class="embed-responsive embed-responsive-21by9">

<iframe width="100%" height="515" src="https://www.youtube.com/embed/1ihRG9DObAU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

Следите за тем, чтобы в коде был параметр /embed/, пример: https://www.youtube.com/embed/1ihRG9DObAU

Копируем весь указанный выше код целиком и вставляем в предполагаемое место. Часто оно указано в комментариях.

Если в шаблоне уже прописан видео файл, то будет достаточно заменить его на скопированный с YouTube. Всё зависит от конструкции кода применяемой в шаблоне. Но, указанный выше код, скопированный целиком должен работать на 100%. При необходимости его следует поместить в div с классом container и соответственно row.
<div class="container">
    <div class="row">
        <div class="col">
.....       
        </div>
    </div>	
</div>

В скопированном c YouTube коде можно менять параметры width="560" (ширина), height="315" (высота) на свои, допустим на: width="100%", height="500".

Адаптивность подобной конструкции будет обеспечена лишь в том случае, если в шаблоне (на сайте) используется фреймворк Bootstrap. Чаще всего этот популярный фреймворк уже подключен в современных шаблонах. В крайнем случае подключить его не сложно.

Скачайте шаблон предложенный ниже, в его дистрибутиве присутствует Bootstrap 4.3.1. Можете использовать его как пример подключения адаптивного видео. При уменьшении экрана видео будет пропорционально уменьшаться в своих размерах.

Скачать живой пример вставки видео в шаблон сайта с описанием можно здесь.
В описание редактирования шаблона входит инструкция по размещению адаптивного видео с YouTube на сайте с примером использования.

Автор: Saah | Просмотров: 38 | 20-10-2019,Вс, 14:48  

Добавить свой комментарий:

@
Похожие публикации