загрузчик 4 видео в полный рост и ширину для оставшейся части области просмотра

Question

, как вы можете видеть на картинке ниже, видео не на высоте 100%. Как я могу получить видео, чтобы заполнить оставшееся место ниже.

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script>
<div class="container-fluid h-100 red">
		<div class="row justify-content-left h-100">
			<div class="col-md-4 text-center" id="yellow">
				<h3 class="display-3">Sublime</h3>
				<h4 class="display-4">What we do.</h4>
				<p class="p-3 my-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores voluptates at provident fugiat ipsam voluptas illum quidem dolores pariatur, culpa, ab optio eum perferendis! Et magni doloremque voluptatem temporibus maiores?</p>
			</div>
			<div class="col-md-8 blue px-0">
				<!--mask color-->
				<div class="view">
					<!--video Source-->
					<video class="video-fluid" autoplay loop muted>
						<source src="/videos/171003A_009_2K.mp4" type="video/mp4"></source>
					</video>
					<div class="mask rgba-indigo-light"></div>
				</div>
			</div>
		</div>
	</div>

[ `

.video-fluid {
    width: 100%;
    height: auto;
}

Answer 1

Как уже говорили другие ... вы, вероятно, не хотите, чтобы высота составляла 100%, поскольку это приведет к растяжению изображения или потере содержимого. Однако вы можете ... оптимизировать свой CSS для лучшего соотношения, добавив еще одну строку:

.video-fluid {
    max-width: 100%;
    width:auto;
    height: auto;
}

Answer 2

Ваш <video> тег имеет этот класс

.video-fluid {
    width: 100%;
    height: auto;
}

width: 100% говорит браузеру, чтобы видео занимало 100% от его ширины, а если оно у вас расположено рядом с боковой панелью, оно поднимется от конца этой панели до конца браузер. heigh: auto установит высоту в соответствии с соотношением сторон <video>, поэтому, если оно равно 16: 9, а его ширина составляет 1600 пикселей, высота составит 900 пикселей.

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