¿Cómo le hago para que el video deje de reproducirse cuando cierro el modal? No encuentro la manera de hacerlo, ya probé con varios códigos y nada
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
jQuery('header').css('display', 'none');
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
jQuery('header').css('display', 'block');
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
jQuery('header').css('display', 'block');
}
}
body {
background: #ccc
}
@media only screen and (max-width: 800px) {
#embed-container-desk {
position: relative;
padding-bottom: 130%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
}
@media only screen and (max-width: 400px) {
#embed-container-desk {
position: relative;
padding-bottom: 350%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
#tache {
padding-top: 140px !important;
}
}
#myBtn {
padding: 20px 25px 20px 25px;
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: #fff;
border: 1px solid #fff;
background-color: rgba(255, 255, 255, 0.01);
margin-top: 28px;
}
#myBtn:hover {
padding: 20px 25px 20px 25px;
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: #000;
border: 1px solid #cddc2a;
background-color: #cddc2a;
margin-top: 28px;
}
#myModal {
width: 100%;
height: 100%;
z-index: 900;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed !important;
/* Stay in place */
z-index: 101;
/* Sit on top */
left: 0px;
top: -20px;
overflow: auto;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: center;
bottom: 0;
background-color: #fefefe;
width: 100%;
height: auto;
margin: auto;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}
/* The Close Button */
.close {
color: #cddc2a;
/*float: left;*/
font-size: 20px;
font-weight: bold;
padding-top: 0px;
}
.close:hover,
.close:focus {
color: #fff !important;
text-decoration: none;
cursor: pointer;
}
.modal-header {
background-color: #5cb85c;
color: white;
}
.modal-body {
width: 100%;
height: auto;
}
.modal-footer {
background-color: #000;
color: white;
}
/* Add Animation */
@-webkit-keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
@keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
.embed-container {
position: relative;
padding-bottom: 95%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#tache {
padding-top: 40px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Trigger/Open The Modal -->
<button id="myBtn">VIEW VIDEO</button>
<!-- The Modal -->
<div id="myModal" class="modal" width="100%">
<!-- Modal content -->
<div class="modal-content" style="background-color:#000;">
<div class="modal-header" style="background-color:#000;">
<span
class="close" id="span-close"><i
class="far fa-times-circle" id="tache"></i></span>
</div>
<div class="embed-container" id="embed-container-desk">
<iframe
src="https://player.vimeo.com/video/158196905?title=0&byline=0&portrait=0"
width="640" height="340" frameborder="0"
webkitallowfullscreen mozallowfullscreen
allowfullscreen style="top:-350px;"></iframe>
</div>
</div>
</div>