How do I self-play and stop a video when I open and close a modal

Question

good afternoon, I created a modal and within this modal I put a youtube video only that I would want it, as soon as I opened the modal, to give in autoplay and stop when I closed the modal. I can’t do this with Youtube video or Vimeo... can someone give me a hand?

thank you very much.

my code is this

HTML

<a href="#MODAL1" class="image-link">video</a>


<div id="MODAL1" class="overlayy2">
    <div class="MODAL1">
        <br>
        <a class="close icon-link" href="#">X</a>
        <div class="content2">
        <br>
        <iframe width="550" height="400" src="https://www.youtube.com/embed/0ArxPy04p_4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style="width: 332.8px; height: 242.036px;" data-meta=" class="" data-scale="32"></iframe>


        </div>
    </div>
</div>

CSS

.overlayy2 {
  position: fixed;
   z-index: 999999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  

}
.overlayy2:target {
  visibility: visible;
  opacity: 1;
}

.Entrevista1 {
  margin: 70px auto;
  padding: 20px;
  background:black;
  border-radius: 2px;
  width: 50%;
  position: relative;
  transition: all 5s ease-in-out;
}



.Entrevista1 h1 {
    font-size: 2rem;
            line-height: 1.3;
  margin-top: 0;
  color: #befee1;
    text-align: justify;


}
.Entrevista1 .close {
  position: absolute;
  top: 20px;
  right: 20px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #befee1;
}
.Entrevista1 .close:hover {
  color: red;
}
.Entrevista1 .content2 {
  max-height: 30%;
  overflow: auto;
  text-align: center;
}




@media screen and (max-width: 700px){

  .Entrevista1{
    width: 90%;
    position: relative;
    overflow: scroll;
  }
  
  .Entrevista1 h1 {
    font-size: 0.7rem;
    
    }


}

Answer 1

HTML5 has a TAG called <video> </video> in this tag you can add attributes of autoplay and controls when you mouse over the video, for example:

<video controls autoplay>
  <source src="nomedovideo.mp4" type="video/mp4">
</video>

Answer 2

Use an Iframe pointing to the video in Modal, on the open button you assign a function to reload this Iframe.

Answer 3

To give an autoplay on Youtube video, you can use the queryparam autoplay, sending the amount 1:

https://www.youtube.com/embed/0ArxPy04p_4?autoplay=1

See that the video is open and is already given play automatically.

---

To close the modal and with that the video be paused, one option is to clear the src of iframe, something like that:

const iframe = document.getElementById("MeuIframeDoYouTube");
ifram.src = "";

But with that, by clicking on the modal again, there will be no src, and the modal will be displayed empty, so when the modal is displayed, you will need to make a similar code, only putting again the src in the iframe:

const iframe = document.getElementById("MeuIframeDoYouTube");
ifram.src = "https://www.youtube.com/embed/0ArxPy04p_4?autoplay=1";

---

Putting these ideas together, you’ll have a code more or less as follows:

function stopVideo() {
    getIFrame().src = "";
}

function startVideo() {
    getIFrame().src = "https://www.youtube.com/embed/0ArxPy04p_4?autoplay=1";
}

function getIFrame() {
    return document.getElementById("youtube");
}

.overlayy2 {
  position: fixed;
  z-index: 999999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

.overlayy2:target {
  visibility: visible;
  opacity: 1;
}

.Entrevista1 {
  margin: 70px auto;
  padding: 20px;
  background:black;
  border-radius: 2px;
  width: 50%;
  position: relative;
  transition: all 5s ease-in-out;
}

.Entrevista1 h1 {
  font-size: 2rem;
  line-height: 1.3;
  margin-top: 0;
  color: #befee1;
  text-align: justify;
}

.Entrevista1 .close {
  position: absolute;
  top: 20px;
  right: 20px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #befee1;
}

.Entrevista1 .close:hover {
  color: red;
}

.Entrevista1 .content2 {
  max-height: 30%;
  overflow: auto;
  text-align: center;
}

@media screen and (max-width: 700px){

  .Entrevista1{
    width: 90%;
    position: relative;
    overflow: scroll;
  }

  .Entrevista1 h1 {
    font-size: 0.7rem;
  }
}

<a href="#MODAL1" class="image-link" onclick="startVideo()">video</a>

<div id="MODAL1" class="overlayy2">
    <div class="MODAL1">
        <br>
        <a onclick="stopVideo()" class="close icon-link" href="#">X</a>
        <div class="content2">
          <br>
          <iframe id="youtube" width="550" height="400" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" style="width: 332.8px; height: 242.036px;" data-scale="32"></iframe>
        </div>
    </div>
</div>

Obs.: The video may not appear on Sopt, so you can test this same code here.