Блог

Есть много статей, в которых обсуждается умный способ в CSS сделать видео (например, youtube), доставляемые через адаптивный iframe (например, описанный здесьhttps://blog.theodo.fr/2018/01/responsive-iframes-css-trick /). В конечном итоге вы помещаете свой iframe в соответствующий контейнер с верхним заполнением, равным соотношению сторон (высота / ширина * 100)% видео.

Это отлично работает, когда ваше соотношение сторон содержимого iframe статично, но есть ли умный способ добиться этого исключительно с помощью CSS, если ваше содержимое iframe также является адаптивным?

Например, допустим, содержимое вашего iframe содержит загрузочную сетку блоков (col-xs-12 col-md-3), и вы присваиваете iframe ширину 100%, чтобы он реагировал на изменение размера родительского окна по вертикали. При уменьшении размера родительского фрейма в момент запуска col-xs-12 соотношение сторон изменилось, и вы, вероятно, увидите, что для iframe появляется вертикальная полоса прокрутки из-за изменения высоты.

Я думаю, что единственный способ добиться отзывчивости в этом случае — это использовать javascript (вызовы postMessage).

У кого-нибудь есть какие-либо мысли?