How to fade out video cover background after video has faded in?

I have the video fading in here:

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fade 10s ease-in 0s forwards;
}

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

  100% {
    opacity: 1;
  }
}

How do I then fade out the the video cover background?

so that it can’t be seen after the video has faded in?

https://jsfiddle.net/1f07jbp8/1/

The background is still behind the video after the video fades in.

How do I have it fade out so that it is not visible?

How would I fade out the background here, after the video has faded in?

So that the background is not visible and can’t be seen.

or would I be doing something different here?

https://jsfiddle.net/1gqdocju/

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #155799, #159957);
}

Can you even see the gradient after the video has faded in?

It looks as though the gradient is behind the video so the question doesn’t make a lot of sense.

the gradient peeks through the bottom at times.

You can see the tiny piece sticking out at the bottom.

So, I was thinking of trying to fade it out or do it a different way where the background becomes invincible.

Would I be able to do something like that?

Would I be able to animate the background to become transparent?

Using keyframes.

background: linear-gradient(120deg, #155799, #159957);

I would add a delay to it until the video is in-front of the background, then it would animate to become transparent.

Would that work?

What happens if you try it?

I do not know how the code would be written to do that.

You can’t animate or transition linear gradients.

You could set it to transparent after a delay but it will switch straight away and not fade slowly.

That’s why we used pseudo elements to hold the gradient in some of your examples and then fade opacity to zero instead.

You can’t set opacity on the curtain element because you would hide the video also. That’s why pseudo elements are needed if you need animation or transition.

So, it will work using pseudo elements, is what you are saying?

And for it to work, it has to be a color, and not a gradient?

Is that all right?

How would that be written?

or it still would not work?

It will work with pseudo elements because you fade the whole element using opacity. You’ve done this before.

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  position: relative;
  overflow: hidden;
  /*background: linear-gradient(120deg, #155799, #159957);*/
}
.curtain:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background: linear-gradient(120deg, #155799, #159957);
  animation: fadeOut 10s ease-in 0s forwards;
  /*adjust 0s value above for delay if needed */ 
}
@keyframes fadeOut {
 to {
    opacity: 0;
  }
}

You don’t need a pseudo element if you just fade a background color to transparent as that can be animated.

You can’t animate gradients as they are effectively images. You can move them but you can’t make them animate to transparent.

1 Like

This is for a gradient, and for just a color, it would be written differently.

https://jsfiddle.net/w8rdy0g5/

I tried just a color here: https://jsfiddle.net/w8rdy0g5/1/

This seems to be wrong.

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  position: relative;
  background: red;
  animation: fadeOut 10s ease-in 0s forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

Yes it is wrong. I explained above that you can’t set the whole thing to opacity zero because that hides everything. You just want the background transparent.

@keyframes fadeOut {
  to {
    background:transparent;
  }
}

Here is a demo explaining the concept.

The pseudo element can be faded to opacity:0 because it hold no content other than the background gradient. It does not contain the foreground content such as text or videos etc. It’s basically a one use element that can be faded out without affecting anything else.

2 Likes

Fixed: https://jsfiddle.net/5yx69twL/1/

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  position: relative;
  background: red;
  animation: fadeOut 10s ease-in 0s forwards;
}

@keyframes fadeOut {
  to {
    background: transparent;
  }
}
1 Like

For it to work with an image my understanding is that a delay is required here.

https://jsfiddle.net/vkhxnu1r/

.video-wrapper {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  position: relative;
  background-image: url("https://i.imgur.com/IUGsjpj.jpg");
  background-size: cover;
  animation: fadeOut 1s ease-in 0s forwards;
  animation-delay: 10s;
}

@keyframes fadeOut {
  to {
    background: transparent;
  }
}

Effectively the delay stops the image disappearing until 10 seconds hav elapsed but then after that it will vanish instantly at the mid-point of the animation duration.

There is no fade effect just an on-off switch.

1 Like

How would I be able to use padding: 8px 8px; without a right scroll bar being added to it?

An older code of mine did it this way:

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

https://jsitor.com/U-LS7jikT

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: black;
}

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

.video-wrapper {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  position: relative;
  background-image: url("https://i.imgur.com/IUGsjpj.jpg");
  background-size: cover;
  animation: fadeOut 1s ease-in 0s forwards;
  animation-delay: 10s;
}

@keyframes fadeOut {
  to {
    background: transparent;
  }
}

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

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fade 10s ease-in 0s forwards;
}

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

  100% {
    opacity: 1;
  }
}

iframe {
  user-select: none;
}

.hide {
  display: none;
}

I just found this:

It would be written like this.

But I don’t need bottom and top, only left and right.

or do I need to include all of them?

.container {
  position: absolute;
  top: 8px;
  left: 8px;
  bottom: 8px;
  right: 8px;
  margin: auto;
}

This is all I think I would need: https://jsfiddle.net/ntg0m9kq/

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

Then test and see if it does what you want.

I’m guessing you probably want top and bottom instead of min-height but I’m not on a computer to test at the moment.

I am not sure what that is supposed to mean.

Why would I want to remove min-height: 100%;?

I just looked into that.

Here are 2 ways it can be written I found.

Is one of them a better way to have it written?

Would it make sense here to keep min-height: 100%;?

In the JSitor codes right scroll bar is not visible.

Code 1 https://jsfiddle.net/Lcwgqahp/2/

https://jsitor.com/1y9WYj9xU

.container {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  bottom: 0;
  /*min-height: 100%;*/
  display: flex;
}

Code 2 https://jsfiddle.net/Lcwgqahp/3/

https://jsitor.com/wzglZGI_zL

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

Once again you are doing things that don’t really make sense for the demo that you are showing. You are taking elements from your fully developed examples that have a different set of criteria in place.

If we take your current demo in isolation then why do you need the absolute positioning at all?

e.g.

.container{
display:flex;
min-height:100%;
margin:0 8px;
}

It’s only when you evolved the demos that absolute positioning came into play as you have other criteria to observe. Which is why saying “what’s best” has no meaning until the full extent of the example is known.

2 Likes