How to have modal videos fade in?

[asasass]

At the code here: https://jsfiddle.net/mr5vx9kn/4/

Clicking on the any of the modal buttons the first time fades in.

Meaning.

I click on one button the video fades in.

I click on a different button, the video does not fade in.

wrapB{
  animation: fadeIn 8s ease-in;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

Also, if I wanted fade to be re-added back to the player, I would do what?

Means, video fades in when clicking on the save button a 2nd time.

Is something supposed to be done in these?

  function openModal(target) {
    const modal = document.querySelector(target);
    modal.classList.add("active");
    modal.querySelector(".panel").classList.add("slide");
  }

 function closeModal(modal) {
    modal.classList.remove("active");
    modal.querySelector(".panel").classList.add("hide");
    removePlayer();
  }

or, am I supposed to do something in the css?

[asasass]

This worked: https://jsfiddle.net/z90drtL4/3/

.wrapB.visible {
  animation: fadeIn 8s ease-in;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

function openModal(target) {
    const modal = document.querySelector(target);
    modal.classList.add("active");
    modal.querySelector(".panel").classList.add("slide");
     modal.querySelector(".wrapB").classList.add("visible");
  }

function closeModal(modal) {
    modal.classList.remove("active");
    modal.querySelector(".panel").classList.add("hide");
    modal.querySelector(".wrapB").classList.remove("visible");
    removePlayer();
  }

[asasass]

Both these ways work on modal button videos I found:

Transition vs. Animation

Transition: https://jsfiddle.net/eupw51sk/1/

.wrapB {
  opacity: 0;
  transition: opacity 8s ease-in-out;
}

.wrapB.visible {
  opacity: 1;
}

Animation: https://jsfiddle.net/z90drtL4/3/

.wrapB.visible {
  animation: fadeIn 8s ease-in;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

[asasass]

I am not even sure why transition would work on the modal button videos in the first place, but not the page where there are 5 videos.

With the transition code, there seems to be an issue: https://jsfiddle.net/d5hycqjb/

When I drop 8s down to 3, when I click on the same button a 2nd time,

There is no fade in of the video.

.wrapB {
  opacity: 0;
  transition: opacity 3s ease-in-out;
}

.wrapB.visible {
  opacity: 1;
}

Compared to Animation: https://jsfiddle.net/p6Ld2guk/1/

I don’t see that issue.

.wrapB.visible {
  animation: fadeIn 3s ease-in;
}

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

  15% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

Maybe the issue, what I am noticing can be explained, I am not sure.

[PaulOB]

You are adding a class here:

window.onload = function() {


  const wrapper = document.querySelector('.wrap');
  wrapper.classList.add('visible');
};

If that happens quickly enough then there will likely be no transition because the default will be visible already and no state change for a transition to occur. As mentioned a number of time you should wait for the video itself to load before you add the transition class. Even though the page has loaded you have separate functions to load the video players and you need to check these are loaded if you want to see animations occurring on them. You already had code for this.

Keyframe Animation on the other hand will always go from one state to another because it is told to do so (unless you remove and add a class instantly and then it doesn’t restart the animation which is why you had the offsetWidth hacks in the previous codes).

You seem to be working on issues that were already solved at some stage which is why it is hard to follow your threads as you jump from one thing to another. One problem gets solved and then you forget the problem before.

[asasass]

I tried to do this one on my own: https://jsfiddle.net/x2r9bek7/3/

This uses javascript: .wrapB.visible goes with the modal buttons.

javascript not needed: .wrapB goes with the 5 page videos.

.wrapB.visible, 
.wrapB:not(.wrapB.visible) .ratio-keeper .wrapB{
  opacity: 0;
  animation: fadeIn 3s ease-in forwards;
  animation-delay: 700ms;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

I figured it out: https://jsfiddle.net/x2r9bek7/5/

.wrapB.visible, 
.outer-container .wrapB:not(.wrapB.visible) {
  opacity: 0;
  animation: fadeIn 3s ease-in forwards;
  animation-delay: 700ms;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}