<div class="container">
<div class="ratio-keeper">
<div id="ytplayer0" data-id="OLAK5uy_nBgqeHieyRYocBrDqSLprkkE5U8Y-m3MU"></div>
</div>
<div class="ratio-keeper">
<div id="ytplayer1" data-id="OLAK5uy_nXJ9YSCDX2jJEFOpyn0kQXIyY9KsBSt-k"></div>
</div>
<div class="ratio-keeper">
<div id="ytplayer2" data-id="OLAK5uy_nBgqeHieyRYocBrDqSLprkkE5U8Y-m3MU"></div>
</div>
<div class="ratio-keeper">
<div id="ytplayer3" data-id="OLAK5uy_nXJ9YSCDX2jJEFOpyn0kQXIyY9KsBSt-k"></div>
</div>
<div class="ratio-keeper">
<div id="ytplayer4" data-id="OLAK5uy_l6d6ubzR8UphJyEvUM0Qr1Z8uD0H7MAqA"></div>
</div>
</div>
html,
body {
/* height: 100%; not needed in this example */
margin: 0;
padding: 0;
}
body {
background: #58c6d5;
padding: 8px; /* put the padding here no on an empty div */
}
body:after {
content: "";
background: rgba(0, 0, 0, 0.26);
background-size: cover;
height: 480px;
position: absolute;
left: 0;
right: 0;
z-index: 2;
top: 0;
}
body:before {
content: "";
height: 480px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
background: url(https://i.imgur.com/QvzwYYc.jpeg) no-repeat;
background-size: cover;
}
.container {
position: relative;
z-index: 3;
max-width: 642px;
margin: 260px auto 0;
padding: 0 15px;
background: #121212;
border: 1px solid #0059dd;
box-shadow: 0 0 0 rgb(0 0 0 / 20%);
border-radius: 0;
margin-bottom: 90px;
}
.ratio-keeper {
height: 0;
padding-top: 56.25%;
overflow: hidden;
position: relative;
}
.ratio-keeper:first-child {
margin: 15px 0 0;
}
.ratio-keeper:not(:first-child) {
margin: 30px 0 0;
}
.ratio-keeper:last-child {
}
.ratio-keeper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.