Replicating a transition effect


#42

That’s not working the iframe still pokes out of the corners.


#43

I should install the chrome browser to see what you’re talking about then.

I’m using firefox.


#44

Chrome:

iframe-corner

Using the new css and js code I gave you above it will look like this:

Have to go now back later on.


#45

Thank You.

I just installed Chrome.

I have to fix a ton of things now that look different with my music page.


#47

How would I reattach that code to this one:
https://jsfiddle.net/2sumv0hj/86/

This one I removed the transition from it.

Because I changed it all around, I’m so confused.

Just trying to get the iframe back in the box.

I went over this a bunch of times, I’m not able to figure this out.

Will I be able to do it with this code?

image


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

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

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

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

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

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

.hide {
  display: none;
}


<div class="jacketd">

 <div class="cover">
  <svg class="play" width="600" height="338" viewbox="-3 -0.3 30 24.655">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
    </svg>

  <div class="lines"></div>
</div></div>



<div class="wrapg hide">

  <iframe class="js-player " src="https://www.youtube-nocookie.com/embed/M7lc1UVf-VE?rel=0&showinfo=0&autoplay=0&iv_load_policy=3&cc_load_policy=0&fs=0&disablekb=1&enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</div>

(function iife() {
  "use strict";

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

  function hideInitialOverlay(wrapper) {
    hide(wrapper);
  }

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".jacketd");
    hideInitialOverlay(wrapper);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".jacketd");
}());

(function iife() {
  "use strict";
  document.querySelector(".jacketd").addEventListener("click", function() {
    document.querySelector(".wrapg").classList.remove("hide");
  });
}());


(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");


  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thevid = cover.parentNode.querySelector("iframe");
    const thewrap = cover.parentNode;
    hide(cover);
    show2(thewrap);
    show(thevid);

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

}());

#48

All fixed: I got it.
https://jsfiddle.net/2sumv0hj/107/


#49

I’m trying to get the code with “the cover” to work the same way as the one with no cover.

How would I do this?
Getting it to resize with a cover on it.

This one has a cover
Trying to get this one to work.
https://jsfiddle.net/zb6mkug3/21/

Working version no cover:
https://jsfiddle.net/zb6mkug3/20/

Since both the video and the cover are the same size, can’t I use this code to target both the video, and the cover?

If it won’t work with the lines going down, I don’t mind removing those and keeping just the image and the hoverable playbutton.

But I’m not able to figure this out.

To be able to do this I might need to add additional code, but I’m not sure.

I tried doing something like this:

In order to do this does the image need to be in the html part?

 .jacketc, img{
  position: relative;

<img class="jacketc video-frame" src="https://i.imgur.com/AJDZEOX.jpg" width="560" height="315">

I know just the image alone by itself works:
https://jsfiddle.net/zb6mkug3/23/

<img class=" video-frame" src="https://i.imgur.com/AJDZEOX.jpg" width="560" height="315">


.video-wrapper {
  min-width: 40%;
  max-width: 560px;
  margin: auto;
}

.ratio-keeper {
  position: relative;
  padding-top: 56.25%;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: linear-gradient(to left, #ba5370, #f4e2d8);
}

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

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

.video-wrapper {
  min-width: 40%;
  max-width: 560px;
  margin: auto;
}

.ratio-keeper {
  position: relative;
  padding-top: 56.25%;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class='outer'>
  <div class='tcell'>
    <div class='video-wrapper'>
      <div class='ratio-keeper'>

#50

I still wasn’t able to figure this out.
Everything I try isn’t working.


#51

If you are using the padding-top aspect ratio method then all the inner elements need to be absolutely placed on top of the padding and not in the flow. Its the padding area that controls the width and height so inner elements would be placed absolutely into place width a width and height of 100% and no margins.

In your /21 demo you would need to change the jacket and the wrap to be absolute.

e.g.

.jacketc,.wrapg {
  position: absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  margin:0;
  }

#52

Then what?
https://jsfiddle.net/zb6mkug3/25/


.jacketc {
  position: absolute;
    left:0;
  top:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  margin:0;
  width: 560px;
  height: 315px;
  cursor: pointer;
  border-radius: 25px;
  background: #000000;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}


.wrapg {
  position: absolute;
    left:0;
  top:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  margin:0;
  width: 606px;
  height: 344px;
  border-radius: 25px;
  cursor: pointer;
  border: 3px solid #FA33FC;
  box-sizing: border-box;
  overflow: hidden;
}

#53

Not working the same way as:
https://jsfiddle.net/zb6mkug3/27/

Shouldn’t the image get smaller too?

This:
https://jsfiddle.net/zb6mkug3/20/


#54

In your code, you are assigning a width and height of 100%, but then immediately overriding those rules with fixed width and height:

  width:100%;
  height:100%;
  margin:0;
  width: 560px;
  height: 315px;
  width:100%;
  height:100%;
  margin:0;
  width: 606px;
  height: 344px;

#55

I removed them here:

This one is updated:
https://jsfiddle.net/zb6mkug3/28/

The image should get smaller as the window closes.
Also, it should stay inside the border.

I would need to apply this to both classes, whatever would get added.

@PaulOB
Wouldn’t the image need to have a set width and height?

That’s not why, it’s because it’s absolute, and not relative, right?

Seen Here:
See how the image doesn’t go through the border.
https://jsfiddle.net/zb6mkug3/23/


#56

If I understand what you mean then that is a background image so you would need to tell it to cover the required area.

e.g.
background-size:cover;

Here:

.jacketc {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  border-radius: 25px;
  background: #000000;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
  background-size:cover;
  }

#57

How would I add that effect to the iframe?
https://jsfiddle.net/zb6mkug3/31/

image

https://jsfiddle.net/zb6mkug3/32/
image


#58

It’s a bit awkward because you are overlapping the parent but something like this should do it.


.wrapg iframe {
  position: absolute;
  top: -3px;
  left: -3px;
  width:calc(100% + 6px);
  height:calc(100% + 6px);
  border-radius: 25px;
  box-sizing: border-box;
}

Going offline now for a while.


#59

All I needed to do was change the fixed width and height to this:
https://jsfiddle.net/zb6mkug3/34/

  width: 100%;
  height: 100%;
.wrapg iframe {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  box-sizing: border-box;
}

#60

Update:

This way works:
Here you can see there is no space in-between the player and the border.
https://jsfiddle.net/zb6mkug3/42/

  width:calc(100% + 6px);
  height:calc(100% + 6px);

This way doesn’t:
As you can see there’s space in-between the player and the border.
https://jsfiddle.net/zb6mkug3/43/

  width: 100%;
  height: 100%;


#61

Yes as I said the iframe needs to be 6px bigger than 100% because you are placing it on the borders and not inside.


#62

Without a cover on, it would be set up like this?
Or no?

I just want to make sure this is how it would be done with no cover on it.
https://jsfiddle.net/2sumv0hj/162/

So basically, to add a border + border-radius: 25px; requires all this extra code.

.wrap {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 25px;
  cursor: pointer;
  border: 3px solid #FA33FC;
  box-sizing: border-box;
  overflow: hidden;
}

.wrap iframe {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  border-radius: 25px;
}

And this is all that’s needed with nothing extra added to it.
If I understand this correctly.
https://jsfiddle.net/2sumv0hj/164/

.video-wrapper {
  min-width: 40%;
  max-width: 560px;
  margin: auto;
}

.ratio-keeper {
  position: relative;
  padding-top: 56.25%;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}