Last active
March 1, 2018 16:20
-
-
Save timersys/99db1a8d2c8db74cb954 to your computer and use it in GitHub Desktop.
Pause youtube video on popup close
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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":""}', '*'); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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