Trying to add 2 additional play buttons to this

[asasass]

And I don’t want the lines in the middle to disappear after you click on it. I have it set up 198px which is in between each section.

This is as far as I was able to get.

Edit fiddle - JSFiddle - Code Playground

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

.wrapg .play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 35px 50px 0 9px;
}

.wrapg .playing {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 249px;
}

.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: 198px;
  display: block;
}

.wrapg #thevideo {
  display: none;
}

.wrapg #thevideo,
iframe {
  width: 198px;
  height: 249px;
}

<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" style="background:red" width="180" height="180" viewbox="8.5 0.9 7 22.1">

<path fill="#0059dd" 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 fill="#0059dd" 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 id="thevideo">

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

  </div>
</div>

[asasass]

! down, 2 to go. I’m getting there.

Placing the lines here: at the top of the code.

Edit fiddle - JSFiddle - Code Playground

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

  <div class="video"

or in this spot:

Towards the bottom.

Edit fiddle - JSFiddle - Code Playground

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

  <div id="thevideo">

As long as it’s above this:
<div class="video"

or below it’s corresponding div tag.

</div>

The reason why it was disappearing was because it was placed inside of it.

---

What I have left with is figuring out how to add in 2 additional play buttons.in those 2 spots.

[asasass]

I almost got it.

Edit fiddle - JSFiddle - Code Playground

After I click on the 2nd button its opening in the 1st spot, and not the 2nd spot like it should…

[asasass]

Adding a margin to the video fixed it.

Edit fiddle - JSFiddle - Code Playground

margin: 0 50px 0 201px;

.wrapg .playingb {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 249px;
  margin: 0 50px 0 201px;
}