Video stop running when closing modal - html

Question

I have a little problem that I find easy to solve, I however do not have enough knowledge to solve it. I've already read some questions here but apparently none seems to solve my problem (I'm pretty sure I'm doing something wrong, hehe)
When I close the modal I want my video that is playing to stop playing
HTML:
Open Modal:
<center>
<a href="#openTrailer">
<img src="IMAGE LINK">
</center>
Modal:
<div id="openTrailer" class="boxTrailer">
<div>X
<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/sY1S34973zA" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS:
.boxTrailer {
overflow: auto;
position: fixed;
font-family: Arial, Helvetica, sans-serif;
color:#fff;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.player {
overflow: auto;
position: fixed;
font-family: Arial, Helvetica, sans-serif;
color:#fff;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.boxTrailer:target {
opacity:1;
pointer-events: auto;
}
.player:target {
opacity:1;
pointer-events: auto;
}
.boxTrailer > div {
width: 600px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 7px;
background-color: black;
}
.player > div {
width: 600px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 7px;
background: #000;
background: -moz-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: 10px;
text-align: center;
top: -20px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}

Answer 1

Can you paste what you have onto JSFiddle, because even though the CSS is in a sense useful, its more useful when used in something like JSFiddle as an example. Otherwise its kinda pointless to post that with your HTML on here with what you're asking.
Maybe something like the following in your HTML file might work for you?
<div id="link"><img src="IMAGE LINK" style="cursor:pointer"></div>
<div id="openTrailer" class="boxTrailer"><div>
X
<iframe id="player" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div></div>
And on the same page at the bottom somewhere add:
<script>
$('#link').click(function () {
var src = 'https://www.youtube.com/embed/sY1S34973zA';
$('#openTrailer iframe').attr('src', src);
});
$('#openTrailer').on($('#close').click(function () {
$('#openTrailer iframe').removeAttr('src');
}));
</script>
This is to give you a idea of what you could do. So either this or something similar to that should work for you. That is because it might need a bit more refining.
I have a Bootstrap version that works, but for the code above I took out the content referring to Bootstrap.
If you do happen to use Bootstrap, I could just give you the code that does what you're asking.
Though another way to do it might be:
X
and
<script>
$('#close').click(function(){$('#openTrailer iframe').removeAttr('src', src);});
</script>