Fade in youtube video after play image is clicked

asasass · August 17, 2021, 3:03am

How would this be done using CSS?

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

body {
  background: #353198;
}

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

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

.play {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  fill: red;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
  cursor: pointer;

}

.container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  
  background: blue;
}

.video-wrapper {
  max-width: 720px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

}

.ratio-keeper {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 0;
  padding-top: 56.25%;
  width: 100%;
  margin: auto;
  }
  
.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hide {
  display: none;
}


<div class="outer">
  <div class="tcell">

    <div class="container hide ">
      <div class="video-wrapper">
        <div class="ratio-keeper">

          <div class="wrap">
            <div class="video video-frame"></div>
          </div>
        </div>
      </div>
    </div>

  </div>

  <svg class="play " width="100%" height="100%" viewBox="0 0 64 64">
    <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
              M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
  </svg>

</div>

 (function manageCover() {
   "use strict";

   function show(el) {
     el.classList.remove("hide");
   }

   function hide(el) {
     el.classList.add("hide");
   }

   function coverClickHandler(evt) {
     const cover = evt.currentTarget;
     hide(cover);
     const thewrap = cover.parentElement.querySelector(".container");
     show(thewrap);
   }

   const cover = document.querySelector(".play");
   cover.addEventListener("click", coverClickHandler);
 }());

asasass · August 17, 2021, 10:27am

Would I add a hide to the wrap?

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

PaulOB · August 17, 2021, 10:36am

Try something like this.

.hide {
 display:none;
 opacity:0;
}
.container:not(.hide){
   opacity:0;
   animation: fade 5s ease 1s forwards;
}

@keyframes fade {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

Its awkward because you can’t animate display:none elements.

asasass · August 17, 2021, 11:17am

Would transition work instead of animation?

PaulOB · August 17, 2021, 12:44pm

No.

You can’t transition from display:none.

asasass · August 17, 2021, 5:24pm

What if it is done this way instead?

I removed: .container:not(.hide){

What’s the difference, is one way better?

https://jsfiddle.net/60v9tua4/

.hide {
  display: none;
  opacity: 0;
}

.wrap {
  opacity: 0;
  animation: fade 3s ease  0s forwards;
}

@keyframes fade {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

asasass · August 17, 2021, 5:30pm

https://jsfiddle.net/n89au6j5/1/

.container:not(.hide){
   opacity:0;
   animation: fade 5s ease 1s forwards;
}

https://jsfiddle.net/6d3conqm/

.wrap {
  opacity: 0;
  animation: fade 5s ease 1s forwards;
}

Compare these 2:

This one looks better between these 2.

or they both look the same, I’m not sure now.
https://jsfiddle.net/6d3conqm/1/

.wrap {
  opacity: 0;
  animation: fade 3s ease  0s forwards;
}

https://jsfiddle.net/n89au6j5/2/

container:not(.hide){
  opacity: 0;
  animation: fade 3s ease  0s forwards;
}

asasass · August 17, 2021, 5:39pm

Are these the differences?

This one fades in the background with the video.

container:not(.hide){
  opacity: 0;
  animation: fade 3s ease  0s forwards;
}

This one only fades in the video?

.wrap {
  opacity: 0;
  animation: fade 3s ease  0s forwards;
}

asasass · August 17, 2021, 6:07pm

If the background is in the javascript, how do you fade it in with the video?

Can that be done?

https://jsfiddle.net/9vrp68em/1/

  function coverClickHandler(evt) {
     const cover = evt.currentTarget;
     const thewrap = cover.parentElement.querySelector(".container");
     show(thewrap);
     document.body.style.backgroundImage = "linear-gradient(teal 5px, #0000 5px), linear-gradient(90deg, teal 5px, #0000 5px), linear-gradient(black 10px, #0000 10px 160px, black 160px), linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px), linear-gradient(orange 15px, #0000 15px 155px, orange 155px), linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px), linear-gradient(black 20px, #0000 20px 150px, black 150px), linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px), linear-gradient(teal 25px, #0000 25px 145px, teal 145px), linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px), linear-gradient(black 30px, #0000 30px 140px, black 140px), linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px), linear-gradient(orange 35px, #0000 35px 135px, orange 135px), linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px), linear-gradient(black 40px, #0000 40px 130px, black 130px), linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px), linear-gradient(teal 45px, #0000 45px 125px, teal 125px), linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px), linear-gradient(black 50px, #0000 50px 120px, black 120px), linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px), linear-gradient(orange 55px, #0000 55px 115px, orange 115px), linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px), linear-gradient(black 60px, #0000 60px 110px, black 110px), linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px), linear-gradient(teal 65px, #0000 65px 105px, teal 105px), linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px), linear-gradient(black 70px, #0000 70px 100px, black 100px), linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px), linear-gradient(orange 75px, #0000 75px 95px, orange 95px), linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px), linear-gradient(black 80px, #0000 80px 90px, black 90px), linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px), linear-gradient(teal, teal)";

     document.body.style.backgroundSize = "165px 165px";
     videoPlayer.play();
   }

I tried this:

That did not work.
https://jsfiddle.net/452v3hse/1/

.container:not(.hide){
   opacity:0;
   animation: fade 5s ease 0s forwards;
}

I also tried:

body:not(.hide){
   opacity:0;
   animation: fade 5s ease 0s forwards;
}

PaulOB · August 18, 2021, 11:04am

Don’t do that.

Just change css classes and keep it all in the css.

I’ve given you the solution anyway.

If you want to fade an image that’s on the body then you have to fade in the whole body element which effectively means the whole page.

asasass · August 18, 2021, 12:58pm

How do you fade in the whole body element? I was trying to figure this out.

How would it be written? So I can add it as an example.

https://jsfiddle.net/9vrp68em/1/

How would this be faded in.

    document.body.style.backgroundImage

I tried this:

"document.body.style.backgroundImage = "animation: background-fade 5s;"

@keyframes background-fade {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

PaulOB · August 18, 2021, 3:18pm

You can’t fade in gradients (I forgot to mention that). Even if you hide the whole element the gradient won’t fade in or out. It will be there or it will not.

Th way to have a fade effect is to place say a black element over the whole background and fade that black element to opacity:0 and that will have the same effect as fading in the element below.

e.g.In your fiddle add this code to test.

.container:not(.hide):before{
  content:"";
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  z-index:999;
  pointer-events:none;
  background:black;
  animation:fadeBody 5s forwards;
  opacity:1;
}
@keyframes fadeBody {
  0% {
    opacity: 1
  }

  100% {
    opacity:0;
  }
}

It uses your existing class to action the effect when .hide is removed. It then places a black background over the whole screen and fades that to opacity:0 to reveal all underneath.

If you wanted you vide to fade at a different rate then you need to sandwich the layers width z-index so that the black background is under the video but above the gradient. It could be tricky.

asasass · August 18, 2021, 3:40pm

I was able to get the gradient to fade in when it was in the css, I’ll see how I did it before.

Like this:
https://jsfiddle.net/4xfta8Lo/1/

.container:not(.hide){
  opacity: 0;
  animation: fade 5s ease  1s forwards;
     background-image:
     linear-gradient(teal 5px, #0000 5px),
     linear-gradient(90deg, teal 5px, #0000 5px),

     linear-gradient(black 10px, #0000 10px 160px, black 160px),
     linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
  
     linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
     linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),
     
     linear-gradient(black 20px, #0000 20px 150px, black 150px),
     linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),
     
     linear-gradient(teal 25px, #0000 25px 145px, teal 145px),
     linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px),

     linear-gradient(black 30px, #0000 30px 140px, black 140px),
     linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),
 
     linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
     linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),

     linear-gradient(black 40px, #0000 40px 130px, black 130px),
     linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),

     linear-gradient(teal 45px, #0000 45px 125px, teal 125px),
     linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px),

     linear-gradient(black 50px, #0000 50px 120px, black 120px),
     linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px),

     linear-gradient(orange 55px, #0000 55px 115px, orange 115px),
     linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px),

     linear-gradient(black 60px, #0000 60px 110px, black 110px),
     linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px),

     linear-gradient(teal 65px, #0000 65px 105px, teal 105px),
     linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px),

     linear-gradient(black 70px, #0000 70px 100px, black 100px),
     linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px),

     linear-gradient(orange 75px, #0000 75px 95px, orange 95px),
     linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px),

     linear-gradient(black 80px, #0000 80px 90px, black 90px),
     linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px),

     linear-gradient(teal, teal);
   background-size: 165px 165px;
 
}

@keyframes fade {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

PaulOB · August 18, 2021, 4:22pm

Yes that’s not on the body element and you aren’t dynamically adding the gradients with js. Also I think what you are seeing is a background color fading out to reveal the gradient underneath which always was there much like the example I gave.

If you remove the Js and instead add a class to html ( document.querySelector('html').classList.add('bodyfade');) you can do this.

   function coverClickHandler(evt) {
     const cover = evt.currentTarget;
     const thewrap = cover.parentElement.querySelector(".container");
     show(thewrap);
     document.querySelector('html').classList.add('bodyfade');
    
     videoPlayer.play();
   }

   const cover = document.querySelector(".play");
   cover.addEventListener("click", coverClickHandler);
 }());

.bodyfade{
  opacity:0;
  background:#353198;
  animation:fadeBody 3s ease forwards;
  
  }

  .bodyfade body{
       background-image:
     linear-gradient(teal 5px, #0000 5px),
     linear-gradient(90deg, teal 5px, #0000 5px),

     linear-gradient(black 10px, #0000 10px 160px, black 160px),
     linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
  
     linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
     linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),
     
     linear-gradient(black 20px, #0000 20px 150px, black 150px),
     linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),
     
     linear-gradient(teal 25px, #0000 25px 145px, teal 145px),
     linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px),

     linear-gradient(black 30px, #0000 30px 140px, black 140px),
     linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),
 
     linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
     linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),

     linear-gradient(black 40px, #0000 40px 130px, black 130px),
     linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),

     linear-gradient(teal 45px, #0000 45px 125px, teal 125px),
     linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px),

     linear-gradient(black 50px, #0000 50px 120px, black 120px),
     linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px),

     linear-gradient(orange 55px, #0000 55px 115px, orange 115px),
     linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px),

     linear-gradient(black 60px, #0000 60px 110px, black 110px),
     linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px),

     linear-gradient(teal 65px, #0000 65px 105px, teal 105px),
     linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px),

     linear-gradient(black 70px, #0000 70px 100px, black 100px),
     linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px),

     linear-gradient(orange 75px, #0000 75px 95px, orange 95px),
     linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px),

     linear-gradient(black 80px, #0000 80px 90px, black 90px),
     linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px),

     linear-gradient(teal, teal);
   background-size: 165px 165px;
  
}

@keyframes fadeBody {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

You may be able to put your gradient back in the js on the body but I’m not going to advise that and won’t test if thats in place.

asasass · August 18, 2021, 4:34pm

Both ways work.

Grad in the js
https://jsfiddle.net/1d72kpfn/2/

Grad in the CSS
https://jsfiddle.net/1d72kpfn/1/

asasass · August 19, 2021, 2:55pm

Works Here:
https://jsfiddle.net/1d72kpfn/1/

.bodyfade {
  opacity: 0;
  background: #353198;
  animation: fadeBody 5s ease forwards;
}

.bodyfade body {
  background-image:
    linear-gradient(teal 5px, #0000 5px),
    linear-gradient(90deg, teal 5px, #0000 5px),

    linear-gradient(black 10px, #0000 10px 160px, black 160px),
    linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),

    linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
    linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),

    linear-gradient(black 20px, #0000 20px 150px, black 150px),
    linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),

    linear-gradient(teal 25px, #0000 25px 145px, teal 145px),
    linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px),

    linear-gradient(black 30px, #0000 30px 140px, black 140px),
    linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),

    linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
    linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),

    linear-gradient(black 40px, #0000 40px 130px, black 130px),
    linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),

    linear-gradient(teal 45px, #0000 45px 125px, teal 125px),
    linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px),

    linear-gradient(black 50px, #0000 50px 120px, black 120px),
    linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px),

    linear-gradient(orange 55px, #0000 55px 115px, orange 115px),
    linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px),

    linear-gradient(black 60px, #0000 60px 110px, black 110px),
    linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px),

    linear-gradient(teal 65px, #0000 65px 105px, teal 105px),
    linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px),

    linear-gradient(black 70px, #0000 70px 100px, black 100px),
    linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px),

    linear-gradient(orange 75px, #0000 75px 95px, orange 95px),
    linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px),

    linear-gradient(black 80px, #0000 80px 90px, black 90px),
    linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px),

    linear-gradient(teal, teal);
  background-size: 165px 165px;
}

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

  100% {
    opacity: 1;
  }
}

But not here:

What is the reason why it won’t, or can’t?
https://jsfiddle.net/fjamqkr9/

PaulOB · August 19, 2021, 3:09pm

Did you add the js to add the class.

document.querySelector('html').classList.add('bodyfade');

asasass · August 19, 2021, 3:16pm

Which way is better?

And is there a difference?

Code 1 Has to use javascript
And it’s applied to the body, not a div class I believe.

document.querySelector('html').classList.add('bodyfadea');

https://jsfiddle.net/v5whqx9L/6/

.bodyfade {
  opacity: 0;
  background: #353198;
  animation: fadeBody 5s ease forwards;
}

.bodyfade body {
  background-image:

Code 2

Gets attached to the container.
https://jsfiddle.net/9r2qexzu/1/

.containera {
  width: 100%;
  display: flex;
  min-height: 100%;
  background-size: 165px 165px;
  opacity: 1;
  animation: fadeBody 5s ease forwards;

system · November 18, 2021, 10:17pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Hide image with play button HTML & CSS	12	1791	July 23, 2022
Help with a simple video player layout please HTML & CSS	7	976	February 28, 2010
Are there any other ways you can add a splashscreen to a YouTube video via html? HTML & CSS html	12	3801	September 24, 2016
Need a little CSS help, please. Thanks! HTML & CSS	13	803	August 29, 2010
Fading out text and background. an issue HTML & CSS	13	2228	July 22, 2022

Fade in youtube video after play image is clicked

Related topics