Issue
I want to place an element above the top right corner of a Youtube Video (an iframe).
Something like this:
Note: notice the white cross on the top right corner.
The iframe is within a container and it expands until a max-width (in this example it’s 20rem) and when the container is narrower, it shrinks with an aspect ratio of 16:9 (big shout out to the old-schoolers who also were forced to do this with the 52% padding trick when aspect-ratio wasn’t a thing yet in CSS!)
You can see it in action here:
.container {
position: relative;
border: 0.1rem dashed tomato;
}
.video {
display: block;
aspect-ratio: 16 / 9;
width: 100%;
max-width: 20rem;
margin: 0 auto;
}<div class="container">
<iframe class="video" src="https://www.youtube.com/embed/8o0Qao60T1Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>The question is: how do I do this?
Did I try something?:
Yes! My happpy me said, "ha, easy, just use :before". And I just learned… it won’t work for an iframe.
So yeah, I’m not seeing the obvious right now, and I’ll appreciate your help.
Solution
If you copy those aspect-ratio and max-width rules to an inner container, you can then have the X float relative to the video’s width.
.container {
position: relative;
border: 0.1rem dashed tomato;
}
.video {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
margin: 0 auto;
}
.inner {
aspect-ratio: 16 / 9;
max-width: 20rem;
border: 1px solid blue;
width: auto;
margin: 0 auto;
}
.inner:before {
content: "X";
display: block;
position: relative;
background: red;
text-align: right;
}<div class="container">
<div class="inner">
<iframe class="video" src="https://www.youtube.com/embed/8o0Qao60T1Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>Answered By – Charlie
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0