No notes defined.
<h2 class="h4">16:9</h2>
<div class="ratio ratio--16x9">
<iframe src="https://www.youtube.com/embed/0ctsZ8w2sQI" allowfullscreen></iframe>
</div>
<div class="slab">
<h2 class="h4">9:16</h2>
<div class="grid grid-2-cols">
<div>
<div class="ratio ratio--9x16">
<iframe src="https://www.youtube.com/embed/2OerQMDA-YU" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="slab">
<h2 class="h4">4:3</h2>
<div class="ratio ratio--4x3">
<div>
<img src="https://picsum.photos/400/300?random=1" alt="" />
</div>
</div>
</div>
<h2 class="h4">16:9</h2>
<div class="ratio ratio--16x9">
<iframe src="https://www.youtube.com/embed/0ctsZ8w2sQI" allowfullscreen></iframe>
</div>
<div class="slab">
<h2 class="h4">9:16</h2>
<div class="grid grid-2-cols">
<div>
<div class="ratio ratio--9x16">
<iframe src="https://www.youtube.com/embed/2OerQMDA-YU" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="slab">
<h2 class="h4">4:3</h2>
<div class="ratio ratio--4x3">
<div>
<img src="https://picsum.photos/400/300?random=1" alt=""/>
</div>
</div>
</div>
.ratio {
position: relative;
height: 0;
overflow: hidden;
}
.ratio > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ratio--16x9 {
padding-bottom: 56.25%; /* CG: 16:9 as a percentage (9 / 16 = 0.5625 or 56.25%) */
}
.ratio--9x16 {
padding-bottom: 178%; /* CG: 9:16 as a percentage (16 / 9 = 1.78 or 178%) */
}
.ratio--4x3 {
padding-bottom: 75%; /* CG: 4:3 as a percentage (3 / 4 = 0.75 or 75%) */
}
.ratio-a4-portrait {
padding-bottom: 141.4%;
}
.ratio-a4-landscape {
padding-bottom: 70.72%;
}
.embed-container {
background-color: #CCC;
}
.optanon-video-message {
padding: $spacing-md;
position: absolute;
z-index: 100;
font-size: 0.75rem;
line-height: 1.1rem;
&[src] {
display: none; /* CG: For use with the Optanon cookie banner. When the script switches "data-src" to "src", the "sorry" message is hidden */
}
}