For the blue background to be the entire screen, what would get changed in css/html?

Meaning, covering the entire screen, over the video player.

The play isn’t splitting here.

I have this: https://jsfiddle.net/8xbs65pj/4/

The play would disappear, and the blue background would slide up.

CSS

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  min-width: 255px;
  display: flex;
  padding: 8px 8px;
}

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}

.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #0a0a0a;
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
  ;
}

.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid #f91f6e;
  pointer-events: none;
}

.curtain.slide::after {
  outline: 1px solid #0059dd;
  transition: outline 2s ease-in;
  /*  add this */
  /*background-image: none;*/
}

.video-one {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  transition: all 8s ease-in 0s;
  transition-delay: 1s;
  background: blue;
  z-index: 0;
  display: flex;
  justify-content: center;
}

.video-one:after {
  content: "";
  background: url("https://via.placeholder.com/264x264");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  aspect-ratio: 1 /1;
  width: 25%;
  min-width: 180px;
}

.curtain.slide .video-one {
  transform: translateY(calc(-100% - 1px));
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

Html

<div class="container">
  <div class="curtain">
    <div class="ratio-keeper">

      <div class="wrap hide">
        <div class="video video-frame" data-id=""></div>
      </div>
      
      <div class="video-one"></div>

    </div>
    <a href="https://www.google.com/">
      <div class="exit"></div>
    </a>

  </div>
  <button class="play" type="button" aria-label="Open"></button>
</div>

I have something similar here but I’m confused: https://jsfiddle.net/fuL1o26k/

How to have the play button added in and the rest.

What would happen to the red border?

Would it still be there? If so would it slide up also.

I can’t follow the logic but it seems like you are asking for something like this.

You could do that by setting video-one to position:fixed but you;d need to reduce the width of the :after element.

(Note that you have a vertical scroll on the body because you have 100% height and padding and you haven’t set the box-sizing: border-box model.)

Similar to this:

https://jsfiddle.net/fuL1o26k/

Play button added in, opens when the button is clicked on.

blue would slide up instead of splitting.

Yes that one uses position:fixed also.

The javascript in that code is different from my question code.

As said just add position:fixed to this demo and it will slide up.


.video-one {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  transition: all 8s ease-in 0s;
  transition-delay: 1s;
  background: blue;
  z-index: 0;
  display: flex;
  justify-content: center;
}

.video-one:after {
  content: "";
  background: url("https://via.placeholder.com/264x264");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  aspect-ratio: 1 /1;
  width: 18%;
  min-width: 180px;
}

There will be issues at smaller screens and matching up the fixed height video etc.

Shouldn’t the curtain be hidden, and not visible behind the background?

https://jsfiddle.net/xq4kzwLj/

That is how it is in the demo: https://jsfiddle.net/fuL1o26k/

I’m confused.

Very confused.

demo

Also, the play button and image aren’t aligned.

Those should stay together.

Yes I already mentioned that in my previous post.

First of all you have a scroll on the container because you set it to height:100% + 8px top and bottom padding. It’s too big for the viewport and that’s why you need the box-sizing: border-box rule on .container (and possibly on some other elements).

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  min-width: 255px;
  display: flex;
  padding: 8px 8px;
  box-sizing:border-box;
}

If by the curtain you mean the red line then I already asked you that a number of times now. If you want the red line hidden then raise the z-index of video-one to 1 and then raise the z-index of .play to 2.

Screen Shot 2022-11-12 at 17.20.03

1 Like

Play button and image still aren’t together.

https://jsfiddle.net/h6bg4pr1/1/

My image is centred but your play button isn’t.

Your button is centred in relation to the ratio-keeper and not the centred image. They are two different things.

You will need to center that initial play button with the viewport instead.

e.g. change absolute to fixed.


.play{position:fixed;}
1 Like