Как сделать видео адаптивным

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

Не адаптированное видео на компьютере
Не адаптированное видео на компьютере
Не адаптированное видео на мобильном
Не адаптированное видео на мобильном

Что бы удобно просматривать видео и на компе и на мобильном, нужно прибегнуть к некоторым манипуляциям с CSS стилями

В CSS файл нужно добавить короткий код, простыми словами выравнивающий видео  по экрану на 100% по ширине, а так же на 50% по высоте

А так же каждый код фрейма заключать в DIV блок с классом videoyt. Вот пример


После добавления этих кодов видео адаптируется под форматы экрана

Адаптированное видео для ПК
Адаптированное видео для ПК

 

Адаптированное видео для мобильного
Адаптированное видео для мобильного

Вот такое простое сайтостроение, ничего тут сложного

С ув. Эдуард

12345
Загрузка...


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

Ваш e-mail не будет опубликован.