Changing the border color after the button is clicked

JavaScript
1

This would be done through the javascript I think, unless if you can do it through the CSS, but I’m not entirely sure.

Yea, I think I’m right when I say the javascript.

**Example Code:**But I don’t want it to change to a hundred different colors, only once after it’s clicked.

<iframe id="existing-iframe-example"
        width="640" height="360"
        src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
        frameborder="0"
        style="border: solid 4px #37474F"
></iframe>

<script type="text/javascript">
  var tag = document.createElement('script');
  tag.id = 'iframe-demo';
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('existing-iframe-example', {
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
    });
  }
  function onPlayerReady(event) {
    document.getElementById('existing-iframe-example').style.borderColor = '#FF6D00';
  }
  function changeBorderColor(playerStatus) {
    var color;
    if (playerStatus == -1) {
      color = "#37474F"; // unstarted = gray
    } else if (playerStatus == 0) {
      color = "#FFFF00"; // ended = yellow
    } else if (playerStatus == 1) {
      color = "#33691E"; // playing = green
    } else if (playerStatus == 2) {
      color = "#DD2C00"; // paused = red
    } else if (playerStatus == 3) {
      color = "#AA00FF"; // buffering = purple
    } else if (playerStatus == 5) {
      color = "#FF6DOO"; // video cued = orange
    }
    if (color) {
      document.getElementById('existing-iframe-example').style.borderColor = color;
    }
  }
  function onPlayerStateChange(event) {
    changeBorderColor(event.data);
  }
</script>

My Code



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

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

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

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

.wrapg .video {
  width: 606px;
  display: block;
}

.wrapg #thevideo {
  display: none;
}

.wrapg #thevideo,
iframe {
  width: 600px;
  height: 338px;
}



<div class="wrapg">

  <div class="video" onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">

    <svg class="play" width="600" height="338" viewbox="-1 -4.2 67 75">
      <path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="#5c91dd"></path>
      <path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
      <path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z"></path>
  </svg>
    <div class="lines"></div>
  </div>


  <div id="thevideo">

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

  </div>
</div>

From This:
https://i.imgur.com/mBYClnt.png

to this:
https://i.imgur.com/xjvTpH6.png

2

You would want to add a classname to the wrapg element, such as “playing”, so that you can then use CSS to set the border color:

.wrapg.playing {
  border: 3px solid darkorange;
}

The place that I mainly use to find easy to understand CSS color names is colours.neilorangepeel.com

1 Like
3

Then what?

.wrapg.playing {
  border: 3px solid darkorange;
}
4

When you click on the button, add a class called “playing” to the play button.

I cannot take you by the hand today to lead you through that.

5

I did this but it is wrong.

<div class="wrapg playing">

I’m not sure where I’m adding this.


 <div class="playing"></div>
6

Wait a second, so this is all being done through CSS, javascript isn’t needed for this?

7

I tried this, this doesn’t work.

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

8

Do you know what I’m doing wrong?

I almost got it here:

.wrapg .playing {
  width: 606px;
  height: 344px;
  border: 3px solid darkorange;
  box-sizing: border-box;
}

9

height, width removed:

.wrapg .playing {
  border: 3px solid darkorange;
  box-sizing: border-box;
}

10

If that can’t be done, I think there’s another way I can do it.

11

Like this?

.wrapg .playing {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 606px;
  height: 344px;
  border: 3px solid darkorange;
  box-sizing: border-box;
}
12

I’ll assume I did this correctly.

13

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