Динамическая шкала ширины контейнера в зависимости от высоты окна браузера (видео iframe)

ivor

Я уже довольно давно пытаюсь понять это с помощью css и, похоже, просто не могу этого понять.

Я не уверен, что это решение для HTML, CSS или JavaScript. Я пытаюсь встроить iframe vimeo, завернутый в контейнер с максимальной шириной и максимальной высотой.

Если при более низком разрешении монитора высота окна браузера меньше максимальной высоты, то я бы хотел, чтобы ширина контейнера масштабировалась в соответствии с видео (без полос на левой/правой стороне видео).

Надеюсь, это имеет смысл, если нет, я снял короткое видео о том, чего пытаюсь достичь:

Любая помощь будет принята с благодарностью.

Вот мой CSS и HTML:

#main-wrap {

положение: относительное;

маржа: 0 авто;

ширина: 100%;

максимальная ширина: 1300 пикселей;

высота: 100%;

максимальная высота: 731 пикселей;

коробка-тень: 0 5px 50px #000;

}

#main-wrap iframe {

положение: относительное;

маржа: 0;

заполнение: 0;

ширина: 100%;

высота: 100%;

фон: желтый;

}

"frameborder=“0”allowfullscreenallow=autoplay>

hALf_MidDLe

Поскольку вы НА САМОМ ДЕЛЕ ничего не позиционируете, вы не делаете ни одной чертовой вещи, которая могла бы гарантировать использование дополнительного DIV или 90%+ этого CSS.

Я бы также отказался от рамки кадра, поскольку, честно говоря, черт возьми, IE9/раньше. Хотя я подозреваю, что вы действительно хотите сделать и почему у вас есть DIV, чтобы позиционировать: абсолютный iframe для поддержания соотношения сторон при больших размерах? Вот что я бы сделал.

 


.video_16x9 {


position:relative;


overflow:hidden; /* chop off excess */


max-height:1vh; /* view-port height */


}


.video_16x9:before {


content:"";


display:block;


width:100%;


height:0;


padding-bottom:56.25%;


/*


Use 62.5% for 16:10. If there is an extra fixed height for


play controls, set it on padding-top or height!


*/


}


.video_16x9 video,


.video_16x9 object,


.video_16x9 iframe { /* just covering all bases */


position:absolute;


top:0;


left:0;


width:100%;


height:100%;


border:0;


}

Код (разметка):

  <div class="video_16x9"> <iframe src="[URL='https://lumtu.com/yti/PAZZAPTFodHRwczovL3BsYXllci52aW1lby5jb20vdmlkZW8vODE0MDAzMzU_YXV0b3BsYXk9MSZtdXRlXdt']https://player.vimeo.com/video/81400335?autoplay=1&muted=1[/URL]" allowfullscreen allow="autoplay" ></iframe> </div>

Код (разметка): За исключением любых опечаток (проездных сообщений), которые должны выполнять свою работу.

Имейте в виду, что старые браузеры не знают vh, но на самом деле, учитывая, что современное воспроизведение видео постепенно вытесняет браузеры до HTML-5, я считаю, что это не проблема.

Люди, которые отказываются присоединиться к нам в ЭТОМ десятилетии (что почти закончилось) должны привыкнуть к тому, что ради них ломают мелочи. Большая хитрость заключается в том, что при абсолютном позиционировании нашего кадра/видео/объекта (в зависимости от того, что вы предпочитаете) он удаляется из потока, не сообщая о своей высоте.

Установка высоты 0 для DIV и последующее применение заполнения создает соотношение сторон, поскольку процентное заполнение основано на ШИРИНЕ элемента.

не высота или размер шрифта. Таким образом, для видео формата 16:9 9/16 == 0,5625 == 56,25%. "Простой". о, и если вы хотите, чтобы желтый цвет отображался вокруг аспекта видео, если оно уменьшилось, поместите его в DIV, а не в кадр. -- редактировать -- моя вина.

Min-height не любит обрезать отступы во всех браузерах, поэтому я создал сгенерированный элемент контента, чтобы установить высоту, когда она меньше области просмотра, а затем использовал overflow:hidden, чтобы обрезать его, когда это так.

Должно сработать.

Технически, поскольку мы являемся блочным элементом, нам не нужно указывать ширину: 100%, но, к сожалению, НЕКОТОРЫЕ браузеры не будут выполнять трюк с процентной высотой без явного объявления ширины.

Похожие темы	Дата
Делимся ссылками на шрифты	19.10.2024, 18:10
нужен новый дизайн для liveinstyle.ru, кто возьмется?	19.10.2024, 18:10
Как соединить несколько картинок в одну?	19.10.2024, 18:10
В каких программах делается дизайн для сайта?	19.10.2024, 18:10
Идея для запуска сайта объявлений	19.10.2024, 18:10
Нужна помощь по сценарию автотипа.	19.10.2024, 18:10
Кто-нибудь знает, как привлечь первых пользователей к новому (бесплатному) плагину резервного копирования WordPress?	19.10.2024, 18:10
Пожалуйста, кто-нибудь, что это за код (зашифрованный или что)	19.10.2024, 18:10
Как превратить посетителей блога в потенциальных клиентов?	19.10.2024, 18:10
Помогите интегрировать CSS-анимацию в заголовок.	19.10.2024, 18:10

Динамическая шкала ширины контейнера в зависимости от высоты окна браузера (видео iframe)

ivor

hALf_MidDLe

I AM

Интересно