Адаптивное видео YouTube для любого сайта Делаем просто и весело!
Вы наверняка встречались с такой ситуацией, когда открываете ютубовский ролик на каком-либо сайте на своем мобильнике и видео залезает за пределы окна просмотра. Такой вариант не есть хороший… во-первых для посетителей, да и с точки зрения SEO тоже.
Это довольно-таки частая ошибка при верстке сайтов. И сводится она к следующему…
Как вы, наверняка заметили, код eframe для вставки на сайт у ютуба задается уже с размерами. И чаще всего они постоянны для ролика – 560 пикселей ширина и 315 пикселей высота. Есть два решения устранения этой проблемы (а может и больше…):
- Первое – в стилях прописать параметры для каждого разрешения экрана девайса. Это куча строк кода
- И второе – задать размеры в процентах к разрешению экрана по высоте, которое, как мне видится, является наиболее простым и универсальным.
Для этого создадим блок, дадим ему, к примеру, имя – frame_ytb и внутри этого блока поместим код фрейма, скопированного с YouTube. Выглядеть это будет так.
1 2 3 |
<div class="frame_ytb"> <iframe width="560" height="315" src="https://www.youtube.com/embed/3nyclUKnF4A" frameborder="0" allowfullscreen></iframe> </div> |
А в css файле вашей темы пропишем следующее:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.frame_ytb{ overflow:hidden; position:relative; padding-bottom:56.25%; /* Размер окна 16:9 */ padding-top:30px; height:0; } .frame_ytb iframe { position:absolute; width:100%; height:100%; left:0; top:0; } |
Как вы заметили, в коде аннотация – Размер окна 16:9. Если у вас размер видео имеет ношение 4:3, то в коде нужно прописать padding-bottom:75%. Вот и все.
Таким нехитрым способом можно сделать адаптивное окно ролика для любых разрешений экран любого девайса.
Подпишитесь на нашу рассылку, чтобы быть в курсе новостей!
Вашему вниманию уже 194 публикаций для ознакомления.
Удачи и до новых встреч!
С уважением, MasterPRO
Рекомендую!
Просмотров страницы: 1884 Метки: Web мастеру ○ wordpress ○ Новости блога ○ Обновление статьи: 25.01.2022 Короткая ссылка:
|
Народная мудрость