Is this how I would fade in a video?

https://jsfiddle.net/otcfks50/

iframe:not(.hide) {
  display: block;
  animation: iframe 10s ease 2s forwards;
  animation-delay: 6s;
  opacity: 0;
}

@keyframes iframe {
  to {
    opacity: 1;
  }
}

If you mean when you click ‘Play’ then the trigger class would be the slide class.

.slide iframe {
  display: block;
  animation: iframe 10s ease 10s forwards;
  opacity: 0;
}

@keyframes iframe {
  to {
    opacity: 1;
  }
}

Are you sure slide is needed? https://jsfiddle.net/ex62cj3h/1/

Seems to work without it?

If I am right, how come it is not needed?

 /*.slide*/ iframe {
  display: block;
  animation: iframe 1s ease 1s forwards;
  animation-delay: 20s;
  opacity: 0;
}

@keyframes iframe {
  to {
    opacity: 1;
  }
}

That’s probably because the youtube code doesn’t add the iframe until you click play so I guess you wouldn’t need it but of course would affect any other iframes on the page (should there be any).

Note that here:

 animation: iframe 1s ease 1s forwards;
  animation-delay: 20s;

Is the same as this:

animation: iframe 1s ease 20s forwards;

No need to do it twice.

1 Like

The animation gets added to all.

Regardless, of adding .slide or not makes no difference in the code.

Yes that’s because the iframe doesn’t exist until you click play so you don’t need the slide class in this demo at the moment. However, as I said above you would run into issues if you did have an iframe somewhere else or added at a later date as you are prone to do.

1 Like

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