Can the exit button on the link buttons be styled in a way similar to the styling used for the videos, using absolute positioning?

HTML & CSS
1

Can the exit button on the link buttons be written similar to how it is written for the videos, using absolute?

Is there that much of a difference how each are written?

I just realized, the structure isn’t centered, because the extra space accounts for the exit button.

A small detail I missed*

Using absolute on the exit button would keep the structure centered.

Can this work using absolute instead of relative?
https://jsfiddle.net/ckLuxo7y/

.exitC {
  position: relative;
  margin: 10px auto 0;
  inset: 0 0 0 0;
  width: 47px;
  height: 47px;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  /*margin: auto;*/
  cursor: pointer;
}

.exitC::before,
.exitC::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background: red;
  transform: rotate(45deg);
}

.exitC::after {
  transform: rotate(-45deg);
}

So the structure stays centered:

With the exit button for youtube I have to do this:

Seen here: https://jsfiddle.net/s0yb3a47/9/


<div class="outer-containerA">
      <div class="video-containerA">
        <button class="exitA" type="button" title="Exit" aria-label="Exit"></button>
        <div class="ratio-keeper">
          <div class="video playA"></div>
          <div class="curtain"></div>
        </div>
        <div class="playA"></div>

      </div>



.video-containerA,
.video-containerB,
.video-containerC {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  position: relative;
}

transform: translateY(100%);
  position: absolute;
  inset: 0 0 0 0;
  top: auto;
  bottom: -6px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47px;
  height: 47px;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

Where the video structure stays centered:

2

Probably something like this should work (untested):

.exitC {
  position: absolute;
  margin: 10px auto 0;
  /*inset: 0 0 0 0;*/
  left:0;
  right:0;
  width: 47px;
  height: 47px;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  /*margin: auto;*/
  cursor: pointer;
}
1 Like
3

With the videos,

inset: 0 0 0 0; is used

With the link buttons it s not needed?

What circumstances requires it, and when is it not needed or necessary?

4

That rule above is equivalent to saying this:

top:0;
bottom:0;
right:0;
left:0;

Which also would be equivalent to saying:

top:0;
left:0;
width:100%;
height:100%;

You should be able to work out from that why buttons would need to be different

1 Like
5

I just learned something new, thanks!

inset: auto 0 -6px 0;
  /*top: auto;
  bottom: -6px;*/
  margin: auto;
  /*8right: 0;
  left: 0;*/
6

Where I am using:

  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

I should replace them all with:

inset:0 0 0 0;

Is that what you would do?

This would be shorthand:
inset: 0;

Then:

I can do this:

.ratio-keeper iframe {
  /*position: absolute;
  top: 0;
  left: 0;*/
  width: 100%;
  height: 100%;
}

.ratio-keeper iframe,
.curtain {
  position: absolute;
  inset: 0;
}

.curtain {
  /*position: absolute;
  height: 100%;
  width: 100%;
  inset:0;*/

I tried removing:

  width: 100%;
  height: 100%;

From the iframe:

It did not work:

7

Yes that would be even shorter and is fine but you just have to remember it applies to all 4 values.

it’s a modern property but well supported these days.

In most cases yes but I would be careful when using iframes as they have width and height attributes so its safer to set width and height when using iframes because although you can set the positions to the 4 corners an absolute element that also has height and width or intrinsic height and width will not be the size of the absolute positions unless they matched. There would be a discrepancy between the 2 values .

My point above exactly :slight_smile: