Pause Youtube Video And Show Div With A Form

I have a youtube video on my website: after some fixed time, I want to pause it and ask the user a question by overlaying a form over the video: What would be the javascript code

Solution 1:

Tyr this:

HTML:

 <div id="video">
          <iframe id="iframe" width="560" height="315" src="https://www.youtube.com/embed/W5MZevEH5Ns" frameborder="0" allowfullscreen ></iframe> 
        </div>
    <div id="message">
        <h1>how do you like the video so far? </h1>
        <div id="question">
          <form> 
            <input type="radio" name="question" value="poor" checked>Poor<br> 
            <input type="radio" name="question" value="good">Good<br> 
            <input type="submit" value="Submit"> 
          </form>
        </div>
    <div>

JQuery:

<script>

 $(document).ready(function(){
        // hiding message on load
        $("#message").hide();

        // time out function
        setTimeout(function(){
        var yourIframe = ('iframe#iframe');
        var src = $('#iframe').attr('src');      

        $('#iframe').attr('src', '').attr('src', src);//pause youtube video
        $("#message").show(); // show message 
        }, 5000);

 });

</script>

Solution 2:

Use the below code to pause and resume the video on opening and closing the popup instead of stop and starting the video again

var iframe = document.getElementsByTagName("iframe")[0].contentWindow;

iframe.postMessage('{"event":"command","func": "playVideo","args":""}','*');
iframe.postMessage('{"event":"command","func": "pauseVideo","args":""}','*');