@evcalist

Как сделать, чтобы видео обрезалось под размер блока?

Есть код, в котором после шапки сразу идет видео:

spoiler
<body>

	<!-- Custom HTML -->
<div class="wrapp">
	<div class="container-fluid">
	
		<header>
			
				<div class="row">
					<div class="col">
						<div class="left-info">
							
						</div>
					</div>
					<div class="col">
						<div class="logo">
							<img class="" src="img/logo.png" alt="" style="width: 20%;"></div>
					</div>
					<div class="col">
						<div class="right-info">
							+79808562544 <br> <button type="button" class="btn btn-primary btn-head">Заказать звонок</button>
						</div>
					</div>
				</div>
			</div>
			<div class="panel">
			<ul class="nav justify-content-center">
					<li class="nav-item">
						<a class="nav-link active" href="#">Active</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>
			</div>	
		</header>
		
		
		<div class="container-fluid">
			<div class="row">
					<div class="video-container">
						<video autoplay loop muted class="bgvideo" id="bgvideo">
							<!-- <source src="video/Movie.mp4" type="video/mp4"></source> -->
						</video>
				</div>
			</div>
		</div>
</div>		
		
		
		<section class="advantages">
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-6">
						<div class="shadow-block cards">
							<div class="card-icon img-wrap"><img src="img/three.svg" alt="Sales" style="width: 15%;"></div>
							<h4>SEO</h4>
							<p>Предоставляем всем нашим клиентам уникальную возможность получить скидку <strong>50%</strong> на все услуги</p>
						</div>	
					</div>
					<div class="col-md-6">
							<div class="shadow-block cards">
							<div class="card-icon img-wrap"><img src="img/rocket.svg" alt="Sales" style="width: 19.6%;"></div>
							<h4>Контекстная реклама</h4>
							<p>Предоставляем всем нашим клиентам уникальную возможность получить скидку <strong>50%</strong> на все услуги</p>
						</div>
					</div>
					<div class="col-md-12">
							<div class="shadow-block cards">
							<h4>Обучение</h4>
							<p>Предоставляем всем нашим клиентам уникальную возможность получить скидку <strong>50%</strong> на все услуги</p>
							</div>
					</div>
					<div class="col-md-12">
							<div class="shadow-block cards">
							<h4>Партнерская программа</h4>
							<p>Предоставляем всем нашим клиентам уникальную возможность получить скидку <strong>50%</strong> на все услуги</p>
							</div>
					</div>
				</div>
</div>


Блоку wrapp задано:
height: 100vh
background-size: cover

Блок подстраивается под размер окна браузера, но видео продолжает покрывать оставшиеся элементы верстки
  • Вопрос задан
  • 220 просмотров
Пригласить эксперта
Ответы на вопрос 1
Odisseya
@Odisseya
Оптимизирую PageSpeed & Performance
Попробуйте задать блоку с видео .video-container { overflow: hidden; }, но это костыль.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы