Как сделать видео адаптивным
В последнее время я начал добавлять полезное видео материалы в конце своих статей, но вот незадача размер окна фиксирован и приходится выбирать, либо маленькое окно адаптированное для мобильных, но на компе неудобно просматривать, либо большее адаптированное под широкий экран, но на мобильном оно выглядит плохо.
Что бы удобно просматривать видео и на компе и на мобильном, нужно прибегнуть к некоторым манипуляциям с CSS стилями
В CSS файл нужно добавить короткий код, простыми словами выравнивающий видео по экрану на 100% по ширине, а так же на 50% по высоте
.videoyt { position: relative; width: 100%; height: 0; padding-bottom: 50%; } .videoyt iframe, .videoyt object, .videoyt embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
А так же каждый код фрейма заключать в DIV блок с классом videoyt. Вот пример
<div class="videoyt"><iframe>....</iframe></div>
После добавления этих кодов видео адаптируется под форматы экрана
Вот такое простое сайтостроение, ничего тут сложного
С ув. Эдуард
Загрузка...