Adding a background in front of the video after the exit button is clicked

[asasass]

Instead of using javascript to delay the video from being removed, which causes the blank screen.

I wanted to put up, place a background in front of the video area after the exit button is clicked.

How would I do that in the code? https://jsfiddle.net/aqdjL3m7/

After the exit button is clicked, a background would be put up there in place of the black screen.

or, maybe the background of black would change to something else after the exit button is clicked?

The black that is seen is from here: background: #0a0a0a;

.curtain {
  position: relative;
  max-width: 642px;
  margin: auto;
  flex: 1 0 0%;
  background: #0a0a0a;
  border: 20px solid #000;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
}

I would be placing a background on top of this one after the exit button is clicked.

Maybe, that is all I am doing, changing the black to to something else after the exit button is clicked.

What is the best way to do this?

[PaulOB]

One way would be like this:

.fadingOut .panel-left,
.fadingOut .panel-right{
  z-index:2;
}
.fadingOut .sliding-panels:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background:red;
background-size:cover;
  z-index:1;
}

Replace the red background with your image.

[asasass]

I found this is all that is needed.

.fadingOut .sliding-panels{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: red;
  background-size: cover;
}

[asasass]

Instead of placing something on top of it, would I be able to just change this background to something else?

background: #0a0a0a;

How might that be written?

.curtain {
  position: relative;
  max-width: 642px;
  margin: auto;
  flex: 1 0 0%;
  background: #0a0a0a;
  border: 20px solid #000;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
}

Would that be done similar to how the blue play changes to green?

I was not able to figure this out.

.color .curtain;{
background:red;  
}

  function markAsColor(color) {
    color.classList.add("color");
  }

 markAsColor(evt.currentTarget);

[PaulOB]

@asasass

I found this is all that is needed.

Yes but that changes the existing dynamics and now the left and right panels are tied to the sliding-panels container rather than the main common container.

It shouldn’t make a difference but my method was guaranteed not to upset anything

@asasass

Instead of placing something on top of it, would I be able to just change this background to something else?

Doesn’t the video sit on that background? I thought you wanted something on top of the video?

[asasass]

The video sits on this, background: #0a0a0a;

So, for example, if I wanted to make that transparent, after the exit button is clicked, how would I do that? https://jsfiddle.net/aqdjL3m7/

.curtain {
  position: relative;
  max-width: 642px;
  margin: auto;
  flex: 1 0 0%;
  background: #0a0a0a;
  border: 20px solid #000;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
}

[PaulOB]

Again I thought you said you were leaving the video in place which means you won’t see the background.

It makes no sense to remove the video until the curtains have closed !! Maybe you should be fading the video out (as my crossfade demo would have allowed).

If you are removing the video and want to have a fade on the black background then effectively you have to fade it to another color (like white) as you can’t punch a hole in the background. Although you could make it transparent and then you’d see whatever was underneath.

[asasass]

When I said this:

Instead of using javascript to delay the video from being removed

I wanted to remove setTimeout from the javascript.

  function removePlayer(player) {
    setTimeout(function () {
      player.destroy();
    }, 8000);
  }

This worked to make it transparent after the exit button is clicked.

https://jsfiddle.net/p1Lg9yq5/2/

.fadingOut .curtain{
  background-color: transparent;
}

Fading this to a different color, I did wrong I think.
background: #0a0a0a;

I just wanted to fade the black to a different background, but not the entire curtain structure.

https://jsfiddle.net/p1Lg9yq5/1/

.curtain {
  position: relative;
  max-width: 642px;
  margin: auto;
  flex: 1 0 0%;
  background: #0a0a0a;
  border: 20px solid #000;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
}

.fadingOut .curtain {
   animation: fadeInBackground 5s ease 0s forwards;
}

@keyframes fadeInBackground {
  0% {
    opacity: 0;
  }

  100% {
    background: blue;
    opacity: 1;
  }
}

[PaulOB]

I don’t follow your logic. You want to fade the background out yet you use an animation to fade it in!

You can’t use opacity on the curtain as that holds everything.

You can(as I have already said) fade the background colour to another colour or even transparent and you don’t need an animation to do that.

e.g.

.curtain {
  position: relative;
  max-width: 642px;
  margin: auto;
  flex: 1 0 0%;
  background: #0a0a0a;
  border: 20px solid #000;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
transition:background 6s ease;
}

.fadingOut .curtain {
  /* animation: fadeInBackground 5s ease 0s forwards;*/
   background-color:transparent;
}