Форум Сайтостроение Веб-строительство

Как Ютуб код <iframe width="560" height="315" src="https://www.youtube.com/embe..........ТИПА..........</iframe> оптимизировать для растяжения во весь экран мобильника и сайта?

Буратинка
На сайте с 30.05.2004
Offline
121
Буратинка
1230

Есть какойто ютубовский код для вставки в код сайта - как его изменить, чтобы видео растягивалось на весь экран по ширине

<iframe width="560" height="315" src="https://www.youtube.com/..........ТИПА ССЫЛКА НА РОЛИК........." frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Пробовал делать width="100%" height="", но высота сьедается

Кубанские мы казаки - 15 лет на этом форуме - треть прожитой жизни :)
PS
На сайте с 07.06.2018
Offline
34
prihod_slnk
#1 

@media(max-width:576px) {

iframe {

width: 100%;

max-width: 100%;

height: auto;

}

}
S
На сайте с 30.09.2016
Offline
469
Sitealert
#2
Буратинка:
высота сьедается

Наверное, родительский блок ограничен по высоте.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
webiumpro
На сайте с 20.03.2017
Offline
39
webiumpro
#3

Обычно фрейму надо высоту в явном виде указывать. Либо если у родительского элемента указана высота, то фрейму можно задать высоту 100%. height: auto работать не будет, потому что фрейм не умеет распознавать высоту своего содержимого, как другие элементы.

Копирование лендингов. Разработка на фреймворке сервисов. Создание сайтов (/ru/forum/994418)
Что если не указывать Упал доход В Яндекс.Браузере появилась защита
S
На сайте с 13.10.2014
Offline
171
silicoid
#4

@media(max-width:576px) {

iframe {

width: 100vw;

max-width: 100vw;

height: 56vw;

}

}

чтоб сохранить соотношение сторон

Буратинка
На сайте с 30.05.2004
Offline
121
Буратинка
#5

Так всётаки куда мне вставить это "https://www.youtube.com/embe.....каляки-маляки......" в код?

webiumpro
На сайте с 20.03.2017
Offline
39
webiumpro
#6

Можно попробовать вот такой костыль еще:

.video-container {
    overflow: hidden;
    text-align: center;
    position: relative;
    width: 100%;
    max-width: 576px;
}

.video-container:before {
    content: "";
    display: block;
    padding-top: calc(100% / (5/3));
}

.video-container iframe {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    margin: auto;
    width: 100%;
    height: 100%;
}

Оборачиваем фрейм в блок с условным классом .video-container. Где 5/3 - это отношение ширины к высоте, замените на нужное соотношение просто. max-width - чтобы на больших мониторах фрейм не расползался на всю ширину

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий