• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Адаптивное видео в YouTube
Адаптивное видео в YouTube
workman
Вторник, 17 Октября 2017 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Для того чтобы сделать видео из YouTube адаптивным, нужно сделать следующее
Вставить тэг iframe с видео в
Код
<div class="myvideo">...</div>
то есть сделать так:
Код
<div class="myvideo">
<iframe width="560" height="315" src="//www.youtube.com/embed/kPYBn8VcdXk" frameborder="0" allowfullscreen></iframe>
</div>

В таблицу стилей в самый низ прописать такой код:
Код
.myvideo {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
border:1px solid #ccc;
}
.myvideo iframe,.myvideo object,.myvideo embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}


данная технология будет работать и для вставки видео с помощью тэга embed
Страна: (RU)
Kosten
Вторник, 17 Октября 2017 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Думал, что плеер с ютуба уже адаптивный идет.
Страна: (RU)
waak
Вторник, 17 Октября 2017 | Сообщение 3
Оффлайн
Заблокированные
Сообщений:588
Награды: 14
Так разве не проще?

Код
.myvideo iframe,.myvideo object,.myvideo embed {
width:100%!important;
min-width:100%!important;
max-width:100%!important;
height:300px;
}
Страна: (RU)
Kosten
Воскресенье, 22 Октября 2017 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
waak, на кино сайте установленные стили, что автоматически плеер на размер и ширину выставляет, как помню на вебочке нашел его, не чего работает.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Адаптивное видео в YouTube
  • Страница 1 из 1
  • 1
Поиск: