mit einem Formular Youtube Video und zeigen div Pause

Question

ich auf meiner Website ein YouTube-Video haben:

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

nach einer festgelegten Zeit, ich will es pausieren und dem Benutzer eine Frage stellen indem Sie ein Formular über das Video überlagert:

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

Was wäre der JavaScript-Code, um das Video nach einer bestimmten Zeit zu pausieren und was wäre das CSS, um das Formular schön anzuzeigen? Grundsätzlich möchte ich die Art und Weise nachahmen, wie Vorlesungen auf coursera.org einmal aussahen.

Answer 1

Tyr dies:

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> 

Answer 2

Verwenden Sie den folgenden Code, um das Video beim Öffnen und Schließen des Pop-up statt Stopp- und Start anhalten und fortsetzen das Video wieder

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

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