Replicating a transition effect

[PaulOB]

@asasass

If I wanted to change the line color on load, what style property would I target to do that?

I would not change the css with js as that creates inline styles and ruins the specificity of the layout. Its ok for multiple progressions where you are progressively altering something but for one off changes simply add or remove classes as required and use css for what is was intended.

e.g.

.playerStatus1 .lines:before,
.playerStatus1 .lines:after {background:green}

.playerStatus2 .lines:before,
.playerStatus2 .lines:after {background:yellow}


.playerStatus3 .lines:before,
.playerStatus3 .lines:after {background:teal}

and so on…

You would then use JS to add the appropriate class (i.e. playerStatus1 or 2 or 3 etc.) to .wrap as and when required (a question for Paul in the JS forum although you have enough snippets of JS now to accomplish this task yourself).

This keeps all styling information in the css and easy to change at a later date without touching the jS.

[asasass]

I have an improvement here he just helped me do to it:

But now I have to adjust it to put what you did in here:

Edit fiddle - JSFiddle - Code Playground

  function changeBorderColor(playerStatus) {
    // let color;
    const color = "red";
    if (playerStatus === 1) {
//       color = "red";
//     }
//     if (color) {
      const wrapper = document.querySelector(".wrapg");
      wrapper.style.borderColor = color;
      wrapper.querySelector(".left").style.borderLeftColor = color;
      wrapper.querySelector(".right").style.borderRightColor = color;
    }
  }

I need to remove this which I did, and add your improvement in:

.wrapg .left {
  position: absolute;
  left: 198px;
  top: 0;
  width: 3px;
  height: 100%;
  border-left: solid #0059dd;
}

.wrapg .right {
  position: absolute;
  left: 399px;
  top: 0;
  width: 3px;
  height: 100%;
  box-sizing: border-box;
  border-right: solid #0059dd;
}

[asasass]

I’m confused:

Edit fiddle - JSFiddle - Code Playground

How would I add this in?

.playerStatus .lines:before,
.playerStatus .lines:after {background:red}

  function changeBorderColor(playerStatus) {
    // let color;
    const color = "red";
    if (playerStatus === 1) {
      //       color = "red";
      //     }
      //     if (color) {
      const wrapper = document.querySelector(".wrapg");
      wrapper.style.borderColor = color;
      wrapper.style.background = color;
      wrapper.querySelector("        ").style.background = color;
    }
  }

[asasass]

I tried this:

Edit fiddle - JSFiddle - Code Playground

     const wrapper = document.querySelector(".wrapg");
      const wrap = document.querySelector(".wrapg .lines");
      wrapper.style.borderColor = color;
      wrap.style.background = color;
    }
  }

[PaulOB]

@asasass

Works perfectly in firefox, not Chrome.

Works fine for me in Chrome.

The cursor disappears once the video is playing but I assumed that was what you wanted because it does the same in Firefox.

@asasass

How would I add this in?

You keep changing topics so I don;t know if this is separate from the questions before or an extension of them?

This is of course JS related and should be answered in your other thread.

I don’t know why you keep adding extra elements for the lines when I have shown you several times how to do it without any extra elements.

Using the code in your latest fiddle you would add the styles like these.

.playerStatus1.wrapg.border,
.playerStatus1 .left,
.playerStatus1 .right {border-color:green}

.playerStatus2.wrapg.border,
.playerStatus2 .left,
.playerStatus2 .right {border-color:yellow}

Those are a little verbose and you don’t really need the multiple dot separated classes except that as you already have them we have to follow suit.

The Js could be changed like this:

 function changeBorderColor(playerStatus) {
    let color;
    if (playerStatus === 1) {
      color = "playerStatus1";
    }
    if (color) {
      document.querySelector(".wrapg").classList.add(color);
    }
  }

Of course @Paul_Wilkins may have something to say about that.

Working page:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.jacketc {
  position: relative;
  width: 606px;
  height: 344px;
  cursor: pointer;
  margin-top: 45px;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}

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

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

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

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

.wrapg.border {
  border: 3px solid #0059dd;
}

.wrapg iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 600px;
  height: 338px;
}

.wrapg .left {
  position: absolute;
  left: 198px;
  top: 0;
  width: 3px;
  height: 100%;
  border-left: solid #0059dd;
}

.wrapg .right {
  position: absolute;
  left: 399px;
  top: 0;
  width: 3px;
  height: 100%;
  box-sizing: border-box;
  border-right: solid #0059dd;
}

.hide {
  display: none;
}

.playerStatus1.wrapg.border,
.playerStatus1 .left,
.playerStatus1 .right {border-color:green}

.playerStatus2.wrapg.border,
.playerStatus2 .left,
.playerStatus2 .right {border-color:yellow}





</style>
</head>

<body>
<div class="jacketc "> <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 class="wrapg border hide">
  <div class="video " data-id="M7lc1UVf-VE"></div>
  <div class="left "></div>
  <div class=" right"></div>
</div>

<script>
(function iife() {
  "use strict";
  const hide = (el) => el.classList.add("hide");

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thewrap = cover.parentNode.querySelector(".wrapg");
    hide(cover);
  }
  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());
(function videoPlayer() {
  "use strict";
  let player;
  const load = document.querySelector(".jacketc");

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

  function loadClickHandler() {
    loadPlayer();
    player.playVideo();
  }
  load.addEventListener("click", loadClickHandler);

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(50); // percent
  }

  function changeBorderColor(playerStatus) {
    let color;
    if (playerStatus === 1) {
      color = "playerStatus1";
    }
    if (color) {
      document.querySelector(".wrapg").classList.add(color);
    }
  }

  function onPlayerStateChange(event) {
    changeBorderColor(event.data);
  }
  window.onYouTubePlayerAPIReady = function() {
    const video = document.querySelector(".video");
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  };
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    const video = wrapper.querySelector(".video");
    show(wrapper);
  }
  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());

</script>

</body>
</html>

Of course this has nothing to do with the transition effects we’ve been talking about in this thread ?

[asasass]

I’m still confused on how I would set this up.

***** You had just showed me I could do it like this:

.playerStatus .lines:before,
.playerStatus .lines:after {background:green}

I’m not referring to transition effects at all.

This is the latest:

I’m not using left / right in the CSS

I tried this:

Edit fiddle - JSFiddle - Code Playground

     const wrapper = document.querySelector(".wrapg");
      const wrap = document.querySelector(".wrapg .lines");
      wrapper.style.borderColor = color;
      wrap.style.background = color;
    }
  }

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

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

  function changeBorderColor(playerStatus) {
    // let color;
    const color = "red";
    if (playerStatus === 1) {
      //       color = "red";
      //     }
      //     if (color) {
      const wrapper = document.querySelector(".wrapg");
      const wrap = document.querySelector(".wrapg .lines");
      wrapper.style.borderColor = color;
      wrap.style.background = color;
    }
  }

[PaulOB]

@asasass

This is the latest:

You have all the pieces to the jigsaw (I just gave them to you). Apply them in the right context and a little thought about what you are doing rather than blindly copying and pasting stuff.

This is what your latest would look like with the new code I suggested.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.jacketc {
	position: relative;
	width: 606px;
	height: 344px;
	cursor: pointer;
	margin-top: 45px;
	border-radius: 25px;
	border: 3px solid #0059dd;
	box-sizing: border-box;
	background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}
.jacketc .play {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	fill: #fa33fc;
}
.jacketc .lines::before, .jacketc .lines::after {
	content: "";
	position: absolute;
	top: 0;
	left: 198px;
	width: 3px;
	height: 100%;
	background: #0059dd;
}
.jacketc .lines::after {
	left: 399px;
}
.wrapg {
	position: relative;
	width: 606px;
	height: 344px;
	margin-top: 45px;
	cursor: pointer;
	overflow: hidden;
	border-radius: 25px;
	border: 3px solid #0059dd;
	box-sizing: border-box;
	background: #000000;
}
.wrapg iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 600px;
	height: 338px;
}
.wrapg .lines::before, .wrapg .lines::after {
	content: "";
	position: absolute;
	top: 0;
	left: 198px;
	width: 3px;
	height: 100%;
	background: #0059dd;
}
.wrapg .lines::after {
	left: 399px;
}
.hide {
	display: none;
}

.playerStatus1 {border-color:green}
.playerStatus1 .lines:before,
.playerStatus1 .lines:after {background:green}


</style>
</head>

<body>
<div class="jacketc "> <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 class="wrapg hide">
  <div class="video " data-id="M7lc1UVf-VE"></div>
  <div class="lines"></div>
</div>
<script>
(function iife() {
  "use strict";
  const hide = (el) => el.classList.add("hide");

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thewrap = cover.parentNode.querySelector(".wrapg");
    hide(cover);
  }
  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());
(function videoPlayer() {
  "use strict";
  let player;
  const load = document.querySelector(".jacketc");

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

  function loadClickHandler() {
    loadPlayer();
    player.playVideo();
  }
  load.addEventListener("click", loadClickHandler);

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(50); // percent
  }

/*
  function changeBorderColor(playerStatus) {
    // let color;
    const color = "red";
    if (playerStatus === 1) {
      //       color = "red";
      //     }
      //     if (color) {
      const wrapper = document.querySelector(".wrapg");
      const wrap = document.querySelector(".wrapg .lines");
      wrapper.style.borderColor = color;
      wrap.style.background = color;
    }
  }
  */
  
  function changeBorderColor(playerStatus) {
	const wrapper = document.querySelector(".wrapg");
	let color;
    if (playerStatus === 1) {
      color = "playerStatus1";
    }
    if (color) {
      wrapper.classList.add(color);
    }
  }


  function onPlayerStateChange(event) {
    changeBorderColor(event.data);

  }

  window.onYouTubePlayerAPIReady = function() {
    const video = document.querySelector(".video");
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  };



}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    const video = wrapper.querySelector(".video");
    show(wrapper);
  }
  const cover = document.querySelector(".jacketc");
  cover.addEventListener("click", coverClickHandler);
}());



</script>
</body>
</html>

Specifically.

.playerStatus1 {border-color:green}
.playerStatus1 .lines:before,
.playerStatus1 .lines:after {background:green}

and…

 function changeBorderColor(playerStatus) {
	const wrapper = document.querySelector(".wrapg");
	let color;
    if (playerStatus === 1) {
      color = "playerStatus1";
    }
    if (color) {
      wrapper.classList.add(color);
    }
  }

[PaulOB]

@asasass

I’m not referring to transition effects at all.

Then you are in the wrong thread (Look at its title)

[asasass]

I don’t understand where this goes:

Edit fiddle - JSFiddle - Code Playground

.playerStatus1 {border-color:green}
.playerStatus1 .lines:before,
.playerStatus1 .lines:after {background:green}

[PaulOB]

@asasass

I don’t understand where this goes:

In the css.

Look at my post I gave you a full working example with everything in place

[asasass]

It wasn’t set up like this so I was confused:

playerStatus {
  border-color: green
}

.playerStatus .lines:before,
.playerStatus .lines:after {
  background: green
}

[asasass]

I wanted the cursor to stay on pointer without changing.

[PaulOB]

@asasass

I wanted the cursor to stay on pointer without changing.

Good luck with that

As I said in Chrome it just flickers off for a fraction of a second and seems to occur when you append your scripts so I don’t think there’s anything you can do about it (but I may be wrong).

Its a non-issue anyway and possibly an accessibility aid to tell you not to click yet as the thing hasn’t loaded.

[asasass]

I have 1 minor question in how you wrote this.
How would I write this part the right way:

If I’m not using this part?
(playerStatus === 1)

With that removed the code works how it’s supposed to.
It changes to green right away after it’s clicked.

But then that leaves an empty block { }

Edit fiddle - JSFiddle - Code Playground

function changeColor() {
    if (color = "playerStatus") {

    }
    if (color) {
      wrapper.classList.add(color);
    }
  }

This is what it looked like before

Edit fiddle - JSFiddle - Code Playground

 if (playerStatus === 1) {
      color = "playerStatus1";
    }
    if (color) {
      wrapper.classList.add(color);
    }
  }

[PaulOB]

@asasass

function changeColor() { if (color = “playerStatus”) { } if (color) { wrapper.classList.add(color); } }

You need to ask this in the JS forum as I don;t know what you are doing now. You seemed to be detecting an event change on the player and changing colours accordingly but now you just want to change it whatever?

You probably just need to add the class.

e.g.

function changeColor() {
      wrapper.classList.add("playerStatus");
  }

However I suggest you keep this in your other thread.

[asasass]

Thank you for that, much simpler than using the if’s.

Now the lines change color much faster than using the other way for some reason.

Changes color faster:

Edit fiddle - JSFiddle - Code Playground

Waits for the youtube player to load:

Edit fiddle - JSFiddle - Code Playground

[asasass]

Inside the borders should read: 560 x 315

It reads: 560 x 312

What would I adjust in the code to fix that?

Edit fiddle - JSFiddle - Code Playground

I’m not really sure how I would fix that.

I think it might have to do with this part of the code:

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

[PaulOB]

@asasass

What would I adjust in the code to fix that?

The height is maintained by your ratio-keeper element so you would need to adjust the percentage until it matches the exact height you want.

.ratio-keeper {
  position: relative;
  padding-top: 56.25%;
  padding-top: 56.75%; /* try this instead and keep tweaking until you get what you want */
}

[asasass]

Thank you.

[asasass]

When you right click on the iframe, I got this.
https://www.youtube.com/watch?v=M7lc1UVf-VE

<div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="https://www.youtube.com/embed/M7lc1UVf-VE?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

Should this read padding-bottom, instead of top?

Edit fiddle - JSFiddle - Code Playground

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