0

I want to place an element above the top right corner of a Youtube Video (an iframe).

Something like this:

enter image description here

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.

1
  • wrap iframe in DIV and use before on div if it doesn't work on an iframe.
    – Grasper
    Aug 3, 2022 at 15:43

2 Answers 2

1

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>

0
-1

Use This

 max-width:100%;

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.