Place an element relative to another under a very specific circumstance-CodePudding

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 >
  <iframe  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.

CodePudding user response：

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 >
  <div >
    <iframe  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>

CodePudding user response：

Use This

 max-width:100%;

You need to change your max-width to see video in full screen.