pause youtube video and show div with a form

Question

I have a youtube video on my website:

<div id="video">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/some_video" frameborder="0" allowfullscreen></iframe> 
</div>

after some fixed time, I want to pause it and ask the user a question by overlaying a form over the video:

<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>

What would be the javascript code to pause the video after a fixed period of time and what would be the css for displaying the form nicely? Basically I want to mimic the way lectures on coursera.org once looked like.

Possible duplicate of [How to pause a YouTube player when hiding the iframe?](https://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-iframe) as far as stopping in general goes — Luca Kiebel, Jul 25 '17 at 14:28

score 0 · Answer 1 · answered Jul 25 '17 at 15:11

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>

this didn't work for me. It just showed the form regardless whether the video was playing or not. Also, when the video was playing the code doesn't pause it. I was also interested in some css/javascript combination that would overlay the question on top of the video when it pauses. — Jan Potworowski, Jul 25 '17 at 15:27

score 0 · Answer 2 · answered Jul 25 '17 at 15:24

0

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":""}','*');

answered Jul 25 '17 at 15:24

Prabhakaran

1,524
2
13
21

ok, this should pause the video but how do I make the video pause itself at a percise moment eg '00:15'? This means at the 15'th second of the video, so If i start watching from the 16th second it shouln't stop – Jan Potworowski Jul 25 '17 at 15:40

pause youtube video and show div with a form

2 Answers2

Linked