Как сделать отзывчивый Vimeo embed расширенным до максимальной высоты?

Question

Я использую FitVids, чтобы мои Vimeo вписывались в реакцию. Я бы хотел установить максимальную высоту на одном из этих встроенных видео. Я пробовал много разных подходов, и все они терпят неудачу по разным причинам.

У меня есть несколько различных критериев, которые я хочу встретиться с моим решением:

• Установить максимальную высоту в видовых-относительных единицах
• Оберните встраивать в контейнер с верхней и нижней прокладкой
• Видео всегда должно заполнять ширину окна просмотра, увеличивая высоту самого себя и его родителя, если только это не приведет к превышению максимальной высоты.

. В этом случае контейнер проходит мимо видео. Это связано с тем, как реагирующая вставка использует прописку, но я не уверен, как ее исправить.

Вот разметка:

<div class="video"> 
    <iframe src="https://player.vimeo.com/video/139407849" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div> 

и CSS:

.video { 
    padding: 6rem 0; 
    background-color: red; 
    overflow: hidden; 
} 

.video iframe { 
    max-height: 80vh ; 
} 

Все кажется довольно простым. Затем я запускаю FitVids на видео, чтобы сделать его масштабируемым. Что я могу сделать, чтобы сделать максимальную работу здесь?

UPDATE: Похоже, что эта методика для реагирующих видеоизображений реагирует на ширину контейнера, но не на высоту. В результате я не смог найти решение для своей проблемы, используя чистый CSS, как я надеялся. Вместо этого я написал несколько Javascript, которые рассчитали настройки ширины, которые мне нужно сделать, если мое видео больше желаемой высоты. Мне все равно хотелось бы услышать лучшее решение, но пока это будет работать.

Answer 1

Не использовать мой собственный рог или что-нибудь еще, но взгляните на это.

https://github.com/mikerodham/responsify

Редактировать по запросу:

Этот плагин построен сам будет принимать какие-либо встраивать видео и сделать их полностью реагировать, если встроенный в DIV с классом responsify