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.