boa tarde, eu criei uma modal e dentro dessa modal meti um video de youtube só que pretenderia que ele, assim que abrisse a modal, desse em autoplay e parasse quando fechasse a modal. não estou conseguindo fazer isso com video de youtube ou vimeo... será que alguem me pode dar uma ajuda?
muito obrigado.
o meu codigo é este
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;
}
}