• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов HTML » Адаптивное видео в YouTube
Адаптивное видео в YouTube
workman
Дата: Вторник, 2017-10-17, 04:09 | Сообщение 1
Гл. Модератор
Сообщений:1717
Награды: 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
Дата: Вторник, 2017-10-17, 04:25 | Сообщение 2
Администраторы
Сообщений:18465
Награды: 55


Думал, что плеер с ютуба уже адаптивный идет.
Страна: (RU)
waak
Дата: Вторник, 2017-10-17, 14:38 | Сообщение 3
Друзья сайта
Сообщений:493
Награды: 12


Так разве не проще?

Код
.myvideo iframe,.myvideo object,.myvideo embed {
width:100%!important;
min-width:100%!important;
max-width:100%!important;
height:300px;
}


http://talantlev.ucoz.ru Скрипты от автора помощь по uCoz
Страна: (RU)
Kosten
Дата: Воскресенье, 2017-10-22, 17:54 | Сообщение 4
Администраторы
Сообщений:18465
Награды: 55


waak, на кино сайте установленные стили, что автоматически плеер на размер и ширину выставляет, как помню на вебочке нашел его, не чего работает.
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов HTML » Адаптивное видео в YouTube
  • Страница 1 из 1
  • 1
Поиск: