Как сделать видео с ютуба на странице сайта адаптивным?

kidink kidink   06.12.2017 12:28   224  
Столкнулся с такой проблемой. На странице http://rolgrad.ru/kupit-sekcionnye-vorota-cena.html моего сайта видео с ютуба с мобильного телефона выходит за грани, хотя все делал через bootstrap. Из за этого не совсем корректно отображается страница. Зайдите с телефона и посмотрите сами. В общем нужна помощь. Буду очень благодарен!
1
snwebdev
0
snwebdev   06.12.2017 15:39
Я делаю так https://space.utema.ru/planet-earth-seen-from-space-full-hd-1080p-original/

<div class="video"><iframe width="100%" src="//www.youtube.com/embed/P5_GlAOCHyE?autoplay=1" frameborder="0" allowfullscreen></iframe></div>


.video {
width: 100%;
position: relative;
padding-top: 56.25%;
}
.video iframe,
.video object,
.video embed,
.video table {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Решение
ZAYMY
0
ZAYMY   06.12.2017 12:37
<div class="video-block"><iframe src="https://www.youtube.com/video" frameborder="0" width="756" height="428"></iframe></div>

.video-block {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
ZAYMY
kidink   06.12.2017 14:32  
спасибо, сейчас попробую
NiceATtacK
1
NiceATtacK   06.12.2017 14:55
В строке <iframe src="" frameborder="0" width="756"> Поменяй width="756" на width="100%" и не слушай предыдущего автора. Блок с видео сам растянется как нужно
NiceATtacK
kidink   30.01.2018 18:05  
благодарю, твое решение помогло)

Войдите, чтобы написать ответ
Вход Регистрация



Услуги графического дизайнера! Создание под заказ логотипов, баннеров, оформление групп.