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


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


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

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


Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545

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


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