How to pause a YouTube player when hiding the iframe?

by

The easiest way to implement this behaviour is by calling the pauseVideo and playVideo methods, when necessary. Inspired by the result of my previous answer, I have written a pluginless function to achieve the desired behaviour.

The only adjustments:

  • I have added a function, toggleVideo
  • I have added ?enablejsapi=1 to YouTube’s URL, to enable the feature

Demo: http://jsfiddle.net/ZcMkt/
Code:

<script>
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
</script>

<p><a href="https://stackoverflow.com/questions/8667882/javascript:;" onClick="toggleVideo();">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
   <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
   <br /><br />
   <a href="https://stackoverflow.com/questions/8667882/javascript:;" onClick="toggleVideo('hide');">close</a>

More Related Contents:

  1. YouTube iframe API: how do I control an iframe player that’s already in the HTML?
  2. Getting Error 403: Access Not Configured. Please use Google Developers Console to activate the API for your project
  3. YouTube Player API: How to get duration of a loaded/cued video without playing it?
  4. Pause youtube video, youtube api
  5. Use a content script to access the page context variables and functions
  6. Why am I seeing an “origin is not allowed by Access-Control-Allow-Origin” error here? [duplicate]
  7. Failed to execute ‘postMessage’ on ‘DOMWindow’: https://www.youtube.com !== http://localhost:9000
  8. YouTube iframe player API – OnStateChange not firing
  9. Why am I seeing an “origin is not allowed by Access-Control-Allow-Origin” error here? [duplicate]
  10. Stop embedded youtube iframe?
  11. How to embed an autoplaying YouTube video in an iframe?
  12. Listening for Youtube Event in JavaScript or jQuery
  13. How to get number of video views with YouTube API?
  14. Event when YouTube video finished
  15. How do you mute an embedded Youtube player?
  16. How can I stop a video with Javascript in Youtube?
  17. Make youtube video fullscreen using iframe and javascript API
  18. How to find out the exact number of followers on YouTube?
  19. Access variables and functions defined in page context using a content script
  20. How to call Greasemonkey’s GM_ functions from code that must run in the target page scope?
  21. What is the best way to have a fallback image in NextJS?
  22. Youtube iframe api not triggering onYouTubeIframeAPIReady
  23. gapi.client.youtube is undefined?
  24. loading multiple video players with youtube api
  25. How to use JavaScript variables in jQuery selectors?
  26. use localStorage across subdomains
  27. Angular 2: How to detect changes in an array? (@input property)
  28. HTML5 Audio tag on Safari has a delay
  29. How to Call a Function inside a Render in React/Jsx
  30. D3.js: Position tooltips using element position, not mouse position?

Leave a Comment