Now the video is just being generated immediately when entering the site (there is sound, pictures are not visible)

window.onload = function(){document.getElementById('popup-bg').onclick = function(e) {if (e.target != this) { return true; } popup(-1);} } function popup(nm) { popupElm = document.getElementById("popup-bg"); if (nm == -1) { popupElm.classList.remove('visible'); } else { elm = popupElm.getElementsByClassName('popup'); if (typeof nm != 'undefined') for (var i = elm.length - 1; i >= 0; i--) { if (elm[i].id == "popup" + nm) { elm[i].classList.add('visible'); popupElm.classList.add('visible'); } else elm[i].classList.remove('visible'); } else popupElm.classList.add('visible'); } }; 
 <div class="popup-bg" id="popup-bg"> <div class="popup" id="popup2"> <div class="head"> <div class="close" onclick="popup(-1)">&times;</div> </div> <div class="contents video" > <p class="mb2">Посмотрите это видео</p> <iframe width="560" height="315" src="https://www.youtube.com/embed/WlnexV2eAvI?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe> </div> </div> </div>

  • one
    You popup-bg create through js and interpose into DOM when it is required, but not in the latent state you hold. - Visman

1 answer 1

To start / stop the video, send a message to the <iframe> . For this feature to work, the video must be loaded in the parameters ?enablejsapi=1&version=3&playerapiid=ytplayer

The working code is below.

 <body> <p id="mb2">Посмотрите это видео</p> <div class="popup-bg" id="popup-bg"> <div class="popup" id="popup2"> <div class="head"> <div class="close" onclick="popup(-1)">&times;</div> </div> <div class="contents video" > <iframe width="560" height="315" src="https://www.youtube.com/embed/WlnexV2eAvI?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe> </div> </div> </div> <style> #mb2 { cursor: pointer; } /* Toggle this class - hide and show the popup */ .popup { visibility: hidden; position: absolute; z-index: 1; top: 0; bottom: 0; margin: auto !important; width: 560px; height: 315px; left: 0; right: 0; } .popup.show { visibility: visible; } </style> <script> window.onload = function(){ document.getElementById('mb2').onclick = function(e) { var popup = document.getElementById("popup2"); popup.classList.toggle('show'); var video = popup.getElementsByTagName('iframe'); if (popup.classList.contains('show')) { video[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*'); console.log(video[0]); } else { video[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*'); } } } </script> </body>

You can see how it works on my test site . The video is shown / hidden by clicking on the text "Watch this video."

  • An interesting way, did not know that you can interact with the iframe. I would just go into api youtube and work through it. - DimenSi
  • @DimenSi It’s impossible to work differently with iframe . Items inside an iframe not available for js manipulation for security reasons. The above method of interacting through messages is recommended in the YouTube documentation. And by the way, yes - this is the use of api youtube. - KAGG Design
  • I found only such documentation and it does not use post messages in the iframe. - DimenSi
  • No need to build JSON by concatenation! JSON.stringify({event: 'command', func: 'playVideo', args: '' }) - Pavel Mayorov
  • @DimenSi indirectly hints in the documentation: "End users should use a browser with support for the HTML5 postMessage feature." I do not remember now where and how I got to the bottom of this method - through postMessage . But it is very convenient - no need to create a player object, just an iframe in html and that's it. - KAGG Design