All geek questions in one place

Start and stop control does not work youtube

I tried to create a custom start and stop in youtube video. It works fine in link reference script

I tried in the html file. It does not work in the html file, I gave my code below

    <html>
  <head>
    <script>

 /*call player*/
function callPlayer(frame_id, func, args) {
    if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
    var iframe = document.getElementById(frame_id);
    if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
        iframe = iframe.getElementsByTagName('iframe')[0];
    }
    if (iframe) {
        // Frame exists, 
        iframe.contentWindow.postMessage(JSON.stringify({
            "event": "command",
            "func": func,
            "args": args || [],
            "id": frame_id
        }), "*");
    }
}
</script>

  </head>
  <body>
     <div id="whateverID" class="video-container"><iframe width="640" height="390" id="yt" frameborder="0" title="YouTube video player" type="text/html" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe></div>
     <div  id="playButton" class="playVideo"><a href="javascript:void callPlayer(&quot;whateverID&quot;,&quot;playVideo&quot;)">Play button</a></div>
     <div class="close_icon" ><a href="javascript:void callPlayer(&quot;whateverID&quot;,&quot;pauseVideo&quot;)">Pause close</a></div>
  </body>
</html>
+4
source share
1 answer

it looks like your page did not finish loading before the start of the script,

try to cut the script tag and move it to the end of the body (so that your page will load first and then your script will load):

  <html>
  <head>


  </head>
  <body>
     <div id="whateverID" class="video-container"><iframe width="640" height="390" id="yt" frameborder="0" title="YouTube video player" type="text/html" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe></div>
     <div  id="playButton" class="playVideo"><a href="javascript:void callPlayer(&quot;whateverID&quot;,&quot;playVideo&quot;)">Play button</a></div>
     <div class="close_icon" ><a href="javascript:void callPlayer(&quot;whateverID&quot;,&quot;pauseVideo&quot;)">Pause close</a></div>

<script>

 /*call player*/
function callPlayer(frame_id, func, args) {
    if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
    var iframe = document.getElementById(frame_id);
    if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
        iframe = iframe.getElementsByTagName('iframe')[0];
    }
    if (iframe) {
        // Frame exists, 
        iframe.contentWindow.postMessage(JSON.stringify({
            "event": "command",
            "func": func,
            "args": args || [],
            "id": frame_id
        }), "*");
    }
}
</script>
  </body>
</html>
+2
source

Source: https://habr.com/ru/post/1664531/

More articles:


All Articles