Поставьте максимальную ширину на видео жидкости

Question

Я использую этот метод, чтобы сделать видео Fluid

https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

.video-container { 
position: relative; 
padding-bottom: 56.25%; /* 16:9 */ 
height: 0; 
> iframe { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
} 
} 

Когда я пытаюсь добавить максимальную ширину MaxWidth: 400px; Я получаю черную прописку сверху и кнопку видео, как это можно избежать?

Мой вопрос: как установить максимальную ширину, не получая черную прокладку?

Answer 1

Установите ширину на 100%, как указано в статье, и измените высоту на основе соотношения видеоизображения и ширины окна. Это также в статье (третий раздел) ... (или ваш вопрос был о чем-то другом, в этом случае извините за недоразумение)

Answer 2

Используйте auto по высоте, то:

(При работает фрагмент кода ниже, выберите полную страницу, а затем изменить размер окна браузера, чтобы увидеть эффект)

video { 
 
    width : 100%; 
 
    height : auto; /* will retain aspect ratio of initial size */ 
 
    max-width: 400px; 
 
    }

<video muted autoplay="true"> 
 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"> 
 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm"> 
 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg"> 
 
</video>