Пытаюсь выравнять ютуб-видео по центру моего контент-блока, но оно почему-то ни в какую не хочет. Почитал в интернете, что нужно обернуть в еще один div
, но толку никакого. Подскажите, пожалуйста, в чем ошибка, может что-то не доглядел.
html,
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: #222;
font-family: 'Playfair Display', serif;
font-weight: 400;
}
.container {
max-width: 1100px;
margin: auto;
color: #C4C4C4;
}
/* VIDEOS */
#videos {
margin-top: 20px;
background-color: #2C2C2C;
box-shadow: -5px 4px 14px 10px rgba(0, 0, 0, 0.18);
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
border: 2px solid red;
margin: 0 auto;
}
.video-container iframe {
display: block;
position: absolute;
top: 0;
margin: 0 auto;
width: 80%;
height: 80%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- VIDEO -->
<section id="videos">
<div class="container">
<div class="video-container">
<iframe src="https://www.youtube.com/embed/CY8kRr-ECPM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</section>
</body>
</html>