Страница 1 из 11
Форум про uCoz » Раздел для uCoz » HTML коды для сайта uCoz » Адаптивное видео в YouTube
Адаптивное видео в YouTube
workman
Дата: Вторник, 17.10.2017, 04:09 | Сообщение # 1
Гл. Модератор
Сообщений:1696
Награды: 8


Для того чтобы сделать видео из 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.10.2017, 04:25 | Сообщение # 2
Администраторы
Сообщений:15797
Награды: 51


Думал, что плеер с ютуба уже адаптивный идет.
Страна: (RU)
waak
Дата: Вторник, 17.10.2017, 14:38 | Сообщение # 3
Vip
Сообщений:331
Награды: 11


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

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


Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545
Страна: (RU)
Kosten
Дата: Воскресенье, 22.10.2017, 17:54 | Сообщение # 4
Администраторы
Сообщений:15797
Награды: 51


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