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:

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

JQuery:

<script>

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

        // time out functionsetTimeout(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":""}','*');