Sometime you want your videos to open in a nice overlay instead of a new window.
There are many solutions for that (modals in BootStrap, LightBox etc.), but since the video is always there – hidden or shown, it will still be heard when closing the overlay. How can you control it or at least make it stop?
One solution would be to use YouTube’s API, but a much simpler solution would be to clear the “src” attribute for the iframe of the embedded video and adding it back when opening the overlay again.
Opening the video overlay:
|
1 2 3 4 |
<a href="https://www.youtube.com/watch?v=video" onclick="event.preventDefault(); $('#modal_video1 iframe').attr('src', 'https://www.youtube-nocookie.com/embedvideo?rel=0&autoplay=1'); modalControl(4)">Open Video</a> |
Closing the video overlay:
|
1 2 |
<button class="close_form element-animation" onclick="$('#modal_video1 iframe').attr('src', '');modalControl(4)">×</button> |