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

Как правильно добавлять фрейм с YouTube на страницу сайта, чтобы он был адаптивным под все устройства.

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

И если вы вставите его на страницу, то ширина ролика будет составлять 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, скопируйте вот эту

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

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

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