Skip to content

Instantly share code, notes, and snippets.

@timersys
Last active March 1, 2018 16:20
Show Gist options
  • Save timersys/99db1a8d2c8db74cb954 to your computer and use it in GitHub Desktop.
Save timersys/99db1a8d2c8db74cb954 to your computer and use it in GitHub Desktop.
Pause youtube video on popup close
/**
* Replace ID_POPUP with your popup ID
**/
jQuery(document).on('spu.box_close',function(e,id){
if( id == 'ID_POPUP' ) {
toggleVideo('hide');
}
});
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":""}', '*');
}
<?php
/**
* Popups Youtube fix
* @link https://timersys.com/popups/
*
* @wordpress-plugin
* Plugin Name: Popups plugin Youtube fix
* Plugin URI: https://timersys.com/popups/
* Description: Creates a javascript file to stop youtube videos when popup is not visible
* Version: 1.0.0
* Author: Timersys
* Author URI: https://timersys.com/popups/
*/
/**
* INTRUCTIONS:
* How to close a youtube video on WordPress popups plugin when popup is closed
* Taken from http://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-iframe
1- Sorround youtube iframe code in a div with id="popupVid"
2- Add ?enablejsapi=1 to YouTube's URL, to enable this feature
So it will look something like:
<div id="popupVid">
<iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
3- Modify script.js file and change ID_POPUP for your real ID
*/
/* DO NOT MODIFY THIS */
add_action( 'wp_enqueue_scripts', 'popups_youtube_js');
function popups_youtube_js(){
wp_enqueue_script( 'youtube_popups', plugins_url( '/script.js', __FILE__ ), fasle, false, true);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment