Адаптивное Youtube видео на странице WordPress
Перед тем как поместить Youtube видео на страницу, необходимо добавить следущие строки в .css файл стилей вашей страницы:
[code language=»css»]
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
[/code]
Когда это будет выполнено, можно добавить Youtube видео iframe используя код указанный в примере:
[code language=»html»]
<div class=»video-container»> <iframe width=»1200″ height=»675″ src=»http://www.youtube.com/embed/S1i5coU-0_Q» frameborder=»0″ allowfullscreen></iframe> </div>
[/code]
Теперь ваше видео будет адаптироваться и коректно отображаться на всех устройствах.
Ответить
Хотите присоединиться к обсуждению?Не стесняйтесь вносить свой вклад!