Многие веб разработчики сталкиваются с проблемой интеграции видео с Youtube в сайты с адаптивным дизайном. Всё дело в том, что Youtube даёт фиксированные размеры видео, а это значит, что при сжатии окна браузера всё это дело будет выглядеть не красиво.
Существует несколько способов изменения ширины и высоты видео. Один из них это изменение размеров видео с помощью Javascript. И всё таки для большинства разработчиков, простых создателей сайтов эта технология малознакома. На помощь приходит давний друг – CSS.
Для начала необходимо поместить в то место где вы желаете выводить видео такой код:
<div class="video"> <iframe src="https://www.youtube.com/embed/KtIgZNZUkC4" frameborder="0" allowfullscreen></iframe> </div>
Также не забудьте тэг iframe поменять на свой, который получили на сервисе ютуб и других.
Далее делаем оформление в css файле?
.video{
width: 100%;
position: relative;
padding-top: 56.25%;
margin: 0 auto;
}
.video iframe, .video object, .video embed{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Логика этого примера проста и полностью рабочая! Создавайте сайты с легко адаптирующимся видео. И удачи вам!
