Skip to content

Instantly share code, notes, and snippets.

@anabelle
Created October 7, 2020 03:17
Show Gist options
  • Save anabelle/73ad3bd50fe6506262c19d9b54d1a8e6 to your computer and use it in GitHub Desktop.
Save anabelle/73ad3bd50fe6506262c19d9b54d1a8e6 to your computer and use it in GitHub Desktop.
<script>
console.log("Block script loaded");
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
console.log("Iframe API ready");
player = new YT.Player('player', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange( e ) {
console.log("Player state change: ", e );
if( e.data == 0 || e.data == 2 ){
console.log("Video paused");
jQuery('.video-newrona-block-overlay').removeClass('activo');
}else if( e.data == 1 ){
jQuery('.video-newrona-block-overlay').addClass('activo');
}
}
function playVideo( e ){
console.log("Target: ", e );
player.playVideo()
}
function pauseVideo( e ){
console.log("Target: ", e );
player.pauseVideo()
}
jQuery('document').ready(function(){
jQuery('.video-newrona-block-overlay').on('click', function(e){
console.log("Overlay clicked");
if( jQuery('.video-newrona-block-overlay').hasClass('activo') ){
pauseVideo( e );
}else{
playVideo( e );
}
});
});
</script>
<div class="video-newrona-block-container alignfull">
<div class="video-newrona-block-overlay" style="background-image:url('<?php echo block_field( 'imagen-de-fondo' ); ?>')">
<h1>
<span class="icon play">
<span class="icon_inner">
</span>
</span></br>
<?php block_field( 'titulo' ) ?>
</h1>
</div>
<div class="video-newrona-block">
<iframe id="player" frameborder="0" scrolling="no" allow="autoplay" marginheight="0" marginwidth="0" width="788.54" height="443" type="text/html" src="https://www.youtube.com/embed/<?php echo get_youtube_id( block_field( 'url-video', false ) ); ?>?autoplay=0&fs=1&iv_load_policy=3&showinfo=0&rel=0&cc_load_policy=0&enablejsapi=1"></iframe>
</div>
</div>
@mrunwal
Copy link

mrunwal commented Oct 25, 2020

Nice.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment