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

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

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

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

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

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


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

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

 

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

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

С ув. Эдуард

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

Распродажа на АлиЭкспресс. Успей купить дешевле!

Понижающий Dc-Dc преобразователь XL4016

Понижающий Dc-Dc преобразователь XL4016

Характеристики:

Ток(макс) 5А(8А)

Вх. напряжение 4-40V

Вых. напряжение 1.25-36V

Макс. мощность 200 Вт КПД: 94%

Размер: 61*41*27 мм

Цена: 251руб.

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

Ваш адрес email не будет опубликован.


Вы все купили для нового проекта? Пора закупиться, пока подешевело

Понижающий Dc-Dc преобразователь LM2596

Понижающий преобразователь LM2596

Характеристики:

Ток(макс) 2А(3А)

Вх. напряжение 3.2-40V

Вых. напряжение 1.25-35V

КПД: 92%

Цена: 55 руб.