Адаптивное видео 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%. Вот и все.
Таким нехитрым способом можно сделать адаптивное окно ролика для любых разрешений экран любого девайса.
| Удачи и до новых встреч! С уважением, MasterPRO |
Рекомендовано к прочтению!
Оценок: (1 среднее: 5,00 из 5)
Загрузка... |
Портативная ленточная пила VEVOR
Ленточная портативная пила оснащена мощным, 10 амперным двигателем мощностью 1100 Вт с регулируемой (6 позиций) скоростью для резки металла, дерева, пластика и др. материалов.... |
|
Просмотров страницы: 606 Метки: Web мастеру ○ wordpress ○ Новости блога ○ Обновление статьи: 25.01.2022 Короткая ссылка:
|
Подпишись и получай новости в числе первых!
 |
Народная мудрость
Наберитесь терпения - новые публикации в процессе осмысления...
