Добавляем правильно YouTube Video на страницу сайта

Коллектив авторов «Darvin Digital»

Коллектив авторов «Darvin Digital»

обновлено: 12 июля 2023

2 мин. на чтение

#SMM #Контент-маркетинг #Продвижение сайтов

Если вы хотите добавить Видео с YOuTube на страницу вашего сайта, то поумолчанию вы получаете вот такой код.

<iframe width="560" height="315" src="https://www.youtube.com/embed/e7Z0LVmZiuM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

И если вы вставите его на страницу, то ширина ролика будет составлять 560 пикселей и высота 315 пикселей соответственно. В мобильных устройствах ваше видео будет вылезать за пределы экрана, если ваша верстка уже адаптивная. Поэтому для того, чтобы такого не случилось, нужно добавить этот фрейм через специальный класс CSS.

Вот этот код добавьте себе в CSS

.video {position:relative;padding-bottom:56.25%;padding-top:25px;height:0;} 
.video iframe {position:absolute;top:0;left:0;width:100%;height:100%;} 

И теперь вместо той строчки кода, которую вы получили с Youtube, скопируйте вот эту

<div class="video">
<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0"
src="https://www.youtube.com/embed/RbyP-wxQgJw?controls=0&amp;showinfo=0" style="width: 100%;height: 100%;border: none;">
</iframe>
</div>

Жирным выделен ID вашего ролика. Он находится как раз в основном URL. Необходимо заменить ID на ваш, не изменяя другого кода.

Теперь Видео с YouTube будет хорошо отображаться на всех устройствах.

Приятного вам кода.