Replicating a transition effect


#21

Adding a position is messing it up:

But with it removed the transition won’t work.

  position:absolute;
  left:0;
  top:0;

Now the player won’t pause, it won’t stop.

The player just keeps going.
Then, the code you made has a glitch in it
that won’t let you pause the player.
https://jsfiddle.net/2sumv0hj/17/

If I remove this it pauses and stops:
https://jsfiddle.net/2sumv0hj/22/


.wrapg .cover {
  width: 600px;
  height: 338px;
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  opacity:1;
  transition:opacity 3s ease, height 0s 3s;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}

I tried this, but now the transition is inactive
https://jsfiddle.net/2sumv0hj/25/


.wrapg .videoWrapper {
  position: relative;
  width: 100%;
  height: 0;
  background-color: #000;
}

.wrapg .videowrapper .cover {
  width: 600px;
  height: 338px;
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  opacity:1;
  transition:opacity 3s ease, height 0s 3s;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}

#22

That’s because you put the code in the wrong place. The height of the cover should be set to zero after the animation but you have reset the height at the bottom of the code.

.wrapg .cover {
  width: 600px;
  height: 338px;
}

We already set the height here and then after the animation set the height to zero.

.wrapg .cover {
  width: 600px;
  height: 338px;
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  opacity:1;
  transition:opacity 3s ease, height 0s 3s;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}

.wrapg .hide {
  opacity:0;
  height:0;
  overflow:hidden;
}

#23

I can delete this then:

.wrapg .cover {
  width: 600px;
  height: 338px;
}

Updated code:
https://jsfiddle.net/2sumv0hj/27/

Still won’t pause.


.wrapg {
  position: relative;
  width: 606px;
  height: 344px;
  margin-top: 8px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}

.wrapg .cover {
  width: 600px;
  height: 338px;
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  opacity:1;
  transition:opacity 3s ease, height 0s 3s;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}
.wrapg .hide {
  opacity:0;
  height:0;
  overflow:hidden;
}

.wrapg .play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  fill: #fa33fc;
}

.wrapg iframe {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 606px;
  height: 344px;
  border: 3px solid #FA33FC;
  box-sizing: border-box;
}

.wrapg .lines::before,
.wrapg .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.wrapg .lines::after {
  left: 399px;
}

#24

It’s fixed now:
And I removed the background off of the first class. and kept it on on 2nd one.
As I believe that only needs to be stated once.
https://jsfiddle.net/2sumv0hj/30/

.wrapg {
  position: relative;
  width: 606px;
  height: 344px;
  margin-top: 8px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}
.wrapg .cover {
  width: 600px;
  height: 338px;
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  opacity:1;
  transition:opacity 3s ease, height 0s 3s;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}

#25

I have a question:

What is the purpose of this:
What does it do?
When you add a transition to height,
that’s intended to do what?

transition:  height 0s 3s;

s = x
s = y

height 0s = x 3s =y;


#26

We are animating the opacity of the element but we are also setting its height to zero at the same time. That would mean that there would be no transition as the height would go straight to zero and you would see no fading effect.

Therefore we set a transition delay for the height that matches the duration of the animation on the opacity. This means that the element goes from opacity 1 to zero and when that is completed the height is then set to zero because the animation has finished.

transition: height 0.3s 0.3s

=

transition: property / duration / delay


#27

If you don’t set a transition to height what is its default value?
Does it have one?

i.e., Omitting height means what?
height 0.3s 0.3s


#28

We are changing the height to zero when the dynamic hide class is added. That means it would go to zero height instantly and you would not see the animation that was set for opacity.

The code adds a transition animation for the height so that we can set a delay as explained above. Without delaying the height to zero you have nothing to see and any other animations are lost.


#29

If I were to remove the height off the transition here the transition effect wouldn’t work.
https://jsfiddle.net/2sumv0hj/36/

.wrapg .cover {
transition:opacity 3s ease, height 0s 3s;
}

The transition works “without” specifying the transition height on the iframe border here, how come?

.wrapg iframe {
  border: 3px solid #FA33FC;
  transition:opacity 3s ease;
}

#30

You are not changing the height of the iframe because you are not hiding the iframe you are basically revealing it.

Think about what you are doing. You have a cover on top of the iframe and you gradually make it fade. Once it’s faded it needs to be moved out of the way or you can’t click the iframe. The iframe only has its border animated not its height.


#31

So, I did that wrong then, I didn’t think I was going it right there.

I have more on this. I’ll be back.

Thanks.


#32

I think what you are telling me here is that, the reason why height doesn’t need to be specified on the transition is because height has nothing to do with the border.

.wrapg iframe {
  border: 3px solid #FA33FC;
  transition:opacity 3s ease;
}

#33

I just added
https://jsfiddle.net/2sumv0hj/43/

.wrapg {
  overflow: hidden;
  border-radius: 25px;
}

And now the borders aren’t changing colors.


.wrapg {
  position: relative;
  width: 606px;
  height: 344px;
  margin-top: 45px;
  overflow: hidden;
  border-radius: 25px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapg .cover {
  width: 600px;
  height: 338px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  transition: opacity 3s ease, background 3s ease, height 0s 3s;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}

.wrapg .hide {
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.wrapg .play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  fill: #fa33fc;
}

.wrapg iframe {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 606px;
  height: 344px;
  border-radius: 25px;     
  border: 3px solid #FA33FC;
  box-sizing: border-box;
  transition: opacity 3s ease;
}

.wrapg .lines::before,
.wrapg .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.wrapg .lines::after {
  left: 399px;
}

#34

If overflow: hidden; isn’t specified on .wrapg, then the image will be a square:
So, I don’t know what do now to fix it so it’s able to work with:

border-radius: 25px;

image


#36

What I want to do is use

border-radius: 25px;

But in order to do that I need to use

overflow: hidden;

And if I add that property, the border colors no-longer change.

Seen Here:
https://jsfiddle.net/2sumv0hj/44/

How would I do this the right way where the borders do change color when using

border-radius: 25px;

and

overflow: hidden;

Which I think is required to be able to do this.

If I remove
overflow: hidden;

The borders change colors:

But then it’s a square again.

Seen Here:
https://jsfiddle.net/2sumv0hj/49/


#37

What if I did it like this?
or it makes no difference?
https://jsfiddle.net/2sumv0hj/55/


.wrapg {
  position: relative;
  width: 606px;
  height: 344px;
  margin-top: 45px;
  border-radius: 25px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}

.wrapg .cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 338px;
  opacity: 1;
  transition: opacity 3s ease, height 0s 3s;
}

.wrapg .hide {
  opacity: 0;
  height: 0;
  overflow: hidden;
}

I’m thinking I should add:
background-position: 0 0;

To this:
https://jsfiddle.net/2sumv0hj/56/

.wrapg .cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 338px;
  opacity: 1;
  transition: opacity 3s ease, height 0s 3s;
}

#38

The problem is that the iframe overflows the border-radius of the parent unless its clipped with overflow:hidden. That means you can’t add a rounded border to it.

What you should be doing is keeping the border on the wrapper and then changing the color of the border on the wrapper instead and leave the iframe alone. However you seemed to have removed any dynamic classes from the wrap and therefore that leaves you with nothing you can use to change the border color on the wrapper.

Your js is now too complex for me but usually when I am swapping classes (you are adding/removing the class called .hide) is that I add the class to the parent wrapper for that section and in that way you can change any or all of the elements in that section when the class is added. At the moment you are targeting the iframe and the cover specifically by removing a class from the iframe and adding a class to the other. You can either add a third class to the wrap (e.g. .open) and use that to change the border-color or revise the JS so that you only add one class to the wrap which will allow you to target the cover and the iframe and anything else inside.

Of course that will mean also revising the CSS to target things properly with the new class. As I said the JS is too complicated for me so you will need to ask a question in the JS forum on how to add this properly.

However this is working for me:

(function iife() {
  "use strict";
  var tag = document.createElement("script");
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onPlayerReady(event) {
    const youtubePlayer = event.target;
    youtubePlayer.setVolume(50); // percent
  }
  window.onYouTubePlayerAPIReady = function() {
    new YT.Player(document.querySelector(".js-player"), {
      events: {
        "onReady": onPlayerReady
      }
    });
  };

  const show = (el) => el.classList.remove("hide");
  const show2 = (el) => el.classList.add("open");
  const hide = (el) => el.classList.add("hide");
  const enableAutoplay = (el) => el.src.replace("autoplay=0", "autoplay=1");
  const autoplay = (el) => el.setAttribute("src", enableAutoplay(el));

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thevid = cover.parentNode.querySelector("iframe");
    const thewrap = cover.parentNode;
    hide(cover);
    show2(thewrap);
    show(thevid);
    autoplay(thevid);
  }
  const cover = document.querySelector(".wrapg .cover");
  cover.addEventListener("click", coverClickHandler);
}());

CSS:

.wrapg {
  position: relative;
  width: 606px;
  height: 344px;
  margin-top: 45px;
  overflow: hidden;
  border-radius: 25px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  transition:border 3s ease;
}
.wrapg.open{  border: 3px solid #FA33FC;}

.wrapg .cover {
  width: 600px;
  height: 338px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  transition: opacity 3s ease, height 0s 3s;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}

.wrapg .hide {
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.wrapg .play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  fill: #fa33fc;
}

.wrapg iframe {
  position: absolute;
  top: 0;
  left:0;
  width: 600px;
  height: 338px;    
  box-sizing: border-box;
  transition: opacity 3s ease;
}
.wrapg .lines::before,
.wrapg .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.wrapg .lines::after {
  left: 399px;
}

As I said my js is limited so i may have broken something else :slight_smile:


#39

What about the way I just figured out now?
#37

Is that a good way to do it or not?


#40

Where’s the working example?

Both those look broken to me and I don’t see what you have done to make it work anyway. The iframe will still stick out.


#41

https://jsfiddle.net/2sumv0hj/56/

image