How to stop/pause an embedded on clicking a cancel button?

Question

I have a video on an overlay div which opens on button click. I have a cancel button on the video which on clicking should close the overlay as well as stop/pause the video. Here's what I am doing -

<html>
<head>
<style>
div#overlay {
    display: none;
    z-index: 2;
    background: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    text-align: center;
}
    div#specialBox {
    display: none;
    position: fixed;
    z-index: 3000;
    height: 100%;
    width: 100%; 
    background: #FFF;
    color: #000;
}
div#wrapper {
    position:absolute;
    top: 0px;
    left: 0px;
    padding-left:24px;
}
.closebtn 
{
    position: absolute;
    top: 0%;
    right: 45px;
    font-size: 40px;
}
</style>

<script>
function toggleOverlay(){
    var overlay = document.getElementById('overlay');
    var specialBox = document.getElementById('specialBox');
    overlay.style.opacity = .8;
    if(overlay.style.display == "block"){
        overlay.style.display = "none";
        specialBox.style.display = "none";
    } 
    else {
        overlay.style.display = "block";
        specialBox.style.display = "block";
    }
}
function pauseVideo()
{
     var vid = document.getElementById('myVid');
     vid.pause();
}
</script>
</head>

<body>
<!-- Start Overlay -->
    <div id="overlay">
<!-- End Overlay -->
<!-- Start Special Centered Box -->
        <div id="specialBox">
            <iframe id="myVid" src="https://player.vimeo.com/video/183364240title=0&byline=0&portrait=0" width="100%" height="100%" frameborder="0"></iframe>
            <div class="closebtn">
                <a href="javascript:void(0)" onclick="toggleOverlay(); pauseVideo()">&times;</a>
            </div>
        </div>
<!-- End Special Centered Box -->
    </div>
<!-- Start Normal Page Content -->
<div id="wrapper">
     <button onmousedown="toggleOverlay()">Apply Overlay</button>
</div>
<!-- End Normal Page Content -->
</body>
</html>

So , when I click on the cancel button, I want to close the overlay div(which is happening) as well as pause the video. Can anyone tell me where am I going wrong?

Nasir T · Accepted Answer · 2016-10-27T19:10:53.850

0

You cant pause the iframe to stop the video running in it (dummy) :). As your using vimeo link so you will have to use vimeo api. To make that happen do as follows:

Add script tag with vimeocdn to froogaloop2.js as follows

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

Next: Add the api=1 querystring in the video url as follows: (Note your video url was missing the ? which was causing the video to not load)

https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0

Last: Put the following code in your pauseVideo function:

function pauseVideo()
{
  var players;
  players=$('#myVid');

  $f(players[0]).api('pause');
}

That should fulfill you needs. (Note: For youtube videos, you may have to use youtube api methods and procedures)

Example code: http://codepen.io/Nasir_T/pen/pEmEJE

Hope this helps.

edited Oct 27 '16 at 19:10

answered Oct 27 '16 at 19:03

Nasir T

2,603
1
9
15

You cant pause the iframe to stop the video running in it - can you explain this? Also, when I click on the Apply Overlay Button again, I need to video to start from the beginning. Any help on that? – AAA Oct 27 '16 at 19:17
Just change the pause in the $f(players[0]).api('pause'); to unload and your all set for the video to restart when Apply Overlay button is clicked again after closing. – Nasir T Oct 27 '16 at 19:28
Awesome. Thanks again! – AAA Oct 27 '16 at 19:32
On the iframe stop question your stop function with the lines var vid = document.getElementById('myVid'); vid.pause(); was actually getting the iframe element in the html and calling a stop method of it which i dont think exists. You need to get to the player within the iframe to call it's api pause method to pause the video. Hope that answers your question. – Nasir T Oct 27 '16 at 19:34
Also, I want the overlay on its own to close if the video is done playing its duration. Any ideas on this? – AAA Oct 27 '16 at 19:49
http://stackoverflow.com/questions/14625367/fire-event-when-vimeo-video-stops-playing - I am trying to do something like this. In the onFinish function I am calling my toggleOverlay(). But does not seem to work – AAA Oct 27 '16 at 20:46
I have updated the codepen. Please check the link in the answer again. What i did was after page had loaded, i added event listener to the player to call it's finish function in which you call the toggleOverlay(); – Nasir T Oct 27 '16 at 22:03
Hey. I dont think me doing all the code will help you learn :) no offense. But here is an idea to help you going. Use different ids on the buttons and the video iframes and vid querystring as before and update your methods to take in ids to identify which vid button was clicked and what code to run. You already have everything you need just need to re-use code based on ids. :) Happy coding. – Nasir T Nov 01 '16 at 14:12
Set ids for the overlays. Add a parameter in the toggleOverlay function as the overlay id and use that to set that overlay settings. Use same id parameter for the pauseVideo function or the unload function with video id your using. – Nasir T Nov 01 '16 at 18:05
Hey Nasir, I could do all of that. The only thing I don't understand is this - [http://stackoverflow.com/questions/40362350/how-to-manage-different-events-with-event-listener-for-different-elements] – AAA Nov 01 '16 at 18:14
I have meeting so will be busy about an hour. Once i get back. I will help you re structure the code in a way to use with multiple videos if you still dont find an answer by then :) . – Nasir T Nov 01 '16 at 18:24

How to stop/pause an embedded on clicking a cancel button?

1 Answers1