Shane Taylor

yeah actually thats a good idea to check the plugins.. thats most likely it… thanks 🙂

I <3 tech support. “Did you try rebooting your computer?”

It happens when I let the plugin insert the .js snippets

If I toggle off the setting “Let Site Kit place code on your site” in the Site Kit plugin and just manually place the 2 scripts in the header.php file, it doesn’t show the “>”

Its most likely and extra “>” a dev left in the plugin code somewhere….

• This reply was modified 4 years, 8 months ago by Shane Taylor.

Hey @guenni007 !

Yeah I do have a fix for that as well. Its a little hacky, but since YT disabled the ability to not show related vids, this is what I did…

I just applied transform: scale(1.9) !important; to the .wp-custom-header iframe when you click the pause button, at half a second which is faster than their related videos popup.. I think it works..

function onPlayerReady() {

				// BIND EXTERNAL PLAY / PAUSE / VOLUME / PROGRESS UI'S - SHANE - 9/14/19

				/////////////////////////////
			  	// TOGGLE PLAY / PAUSE BUTTON
			  	/////////////////////////////

			  	var playButton = document.getElementById("playPause");

			  	playButton.addEventListener("click", function() {

			  		var state = handler.player.getPlayerState();

					if (state==2) {
						handler.player.playVideo();

						// BUTTON

						jQuery("#playPause .fa-stack-1x").removeClass("fa-play");
				        jQuery("#playPause .fa-stack-1x").addClass("fa-pause");

				        // BG ANIMATIONS
				        
				        setTimeout(function() { 
				        	jQuery("#hero_text").removeClass("darken-overlay-on-pause");
				        	jQuery(".wp-custom-header iframe").removeClass("crap-fix-for-ytp-pause-overlay"); 

				        	// THIS WORKS ON SINGLE PROPERTY PAGES FOR NOW
				        	jQuery("#hero_video_layer").removeClass("darken-overlay-on-pause");

				        }, 500);
					}
					else {
						handler.player.pauseVideo();

						// BUTTON 

						jQuery("#playPause .fa-stack-1x").removeClass("fa-pause");
				        jQuery("#playPause .fa-stack-1x").addClass("fa-play");

				        // BG ANIMATIONS

				        //jQuery("#hero_text").addClass("darken-overlay-on-pause");
				        jQuery(".wp-custom-header iframe").addClass("crap-fix-for-ytp-pause-overlay");

				        // THIS WORKS ON SINGLE PROPERTY PAGES FOR NOW
				        jQuery("#hero_video_layer").addClass("darken-overlay-on-pause");

					}
				});

			  	//////////////////////////////
			  	// TOGGLE MUTE / UNMUTE BUTTON
			  	//////////////////////////////

			  	var muteButton = document.getElementById("muteUnmute");

			  	muteButton.addEventListener("click", function() {
					if(handler.player.isMuted()) {
						handler.player.unMute();
						jQuery("#muteUnmute .fa-stack-1x").removeClass("fa-volume");
				        jQuery("#muteUnmute .fa-stack-1x").addClass("fa-volume-mute");
					}
					else {
						handler.player.mute();
						jQuery("#muteUnmute .fa-stack-1x").removeClass("fa-volume-mute");
				        jQuery("#muteUnmute .fa-stack-1x").addClass("fa-volume");
					}
				});

				//////////////////////////
				// CURRENT TIME / DURATION
				//////////////////////////

				// UPDATE THE CONTROLS ON LOAD

			    updateTimerDisplay();
			    updateProgressBar();

			    // CLEAR ANY OLD INTERVAL

			    clearInterval(time_update_interval);

			    // START INTERVAL TO UPDATE ELAPSED TIME DISPLAY AND THE ELAPSED PART OF THE PROGRESS BAR EVERY SECOND

			    var time_update_interval;

			    time_update_interval = setInterval(function () {
			        updateTimerDisplay();
			        updateProgressBar();
			    }, 100)				

				function updateTimerDisplay() {

					var currentTime = document.getElementById("current-time");
					var duration = document.getElementById("duration");

				    // UPDATE CURRENT TIME TEXT DISPLAY

				    jQuery('#current-time').text(formatTime( handler.player.getCurrentTime() ));
				    jQuery('#duration').text(formatTime( handler.player.getDuration() ));
				}

				function formatTime(time) {
				    time = Math.round(time);

				    var minutes = Math.floor(time / 60),
				    seconds = time - minutes * 60;

				    seconds = seconds < 10 ? '0' + seconds : seconds;

				    return minutes + ":" + seconds;
				}

				//////////////////////
				// PROGRESS BAR SLIDER
				//////////////////////

			  	var progressBar = document.getElementById("progress-bar");

			  	jQuery('#progress-bar').on('mouseup touchend', function (e) {

				    // CALCULATE THE NEW TIME FOR THE VIDEO.
				    // new time in seconds = total duration in seconds * ( value of range input / 100 )
				    
				    var newTime = handler.player.getDuration() * (e.target.value / 100);

				    // SKIP VIDEO TO NEW TIME

				    handler.player.seekTo(newTime);
				});

				function updateProgressBar(currstep) {
				    
				    // UPDATE THE VALUE OF THE PROGRESS BAR ACCORDINGLY

				    jQuery('#progress-bar').val((handler.player.getCurrentTime() / handler.player.getDuration()) * 100);
				}

				/*

				// USE THIS FOR PROGRESS BAR 

				setProgress = function(currstep) {
					var percent = parseFloat(100 / widget.length) * currstep;
					percent = percent.toFixed();
					jQuery(".progress-bar").css("width",percent+"%").html(percent+"%");
				}
				*/

			}

and this was the CSS I applied onclick

.crap-fix-for-ytp-pause-overlay {
    
  -webkit-filter: grayscale(100%); 
          filter: grayscale(100%);

  transform: scale(1.9) !important;
}

or you could do this

.darken-overlay-on-pause {
  background-color: rgba(0,0,0,.3) !important;
}

here is an example to an unfinished page that will be back in under construction mode in about 30 min… It’s not done, but you get the idea

• This reply was modified 6 years, 2 months ago by Shane Taylor.

resolved

• This reply was modified 6 years, 5 months ago by Shane Taylor.

this is the exact code in WP’s core file wp-custom-header.js (that ive reregistered and edited)

YouTubeHandler = BaseHandler.extend(/** @lends wp.YouTubeHandler.prototype */{
		
		/* 	WHETHER THE HANDLER SUPPORTS A VIDEO.
			@param {object} settings Video settings.
		  	@return {boolean}
		*/

		test: function( settings ) {
			return 'video/x-youtube' === settings.mimeType;
		},

		/* SET UP A YOUTUBE IFRAME. LOADS THE YOUTUBE IFRAME API IF THE 'YT' GLOBAL DOESN'T EXIST */

		ready: function() {
			var handler = this;

			if ( 'YT' in window ) {
				YT.ready( handler.loadVideo.bind( handler ) );
			}
			else {
				var tag = document.createElement( 'script' );
				tag.src = 'https://www.youtube.com/iframe_api';
				tag.onload = function () {
					YT.ready( handler.loadVideo.bind( handler ) );
				};

				document.getElementsByTagName( 'head' )[0].appendChild( tag );
			}
		},

		/* LOAD A YOUTUBE VIDEO */

		loadVideo: function() {

			var handler = this,
				video = document.createElement( 'div' ),
				// @link http://stackoverflow.com/a/27728417
				VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;

			video.id = 'wp-custom-header-video';
			handler.setVideo( video );

			handler.player = new YT.Player( video, {
				height: this.settings.height,
				width: this.settings.width,
				videoId: this.settings.videoUrl.match( VIDEO_ID_REGEX )[1],
				events: {
										
					onReady: function(e) {
						e.target.mute();  // SOUND FOR VIDEO
						onPlayerReady;
						handler.showControls();
					},
					onStateChange: function(e) {

						//onPlayerStateChange();

						if ( YT.PlayerState.PLAYING === e.data ) {
							handler.trigger( 'play' );
						}
						else if ( YT.PlayerState.PAUSED === e.data ) {
							handler.trigger( 'pause' );
						}
						else if ( YT.PlayerState.ENDED === e.data ) {
							e.target.playVideo();
						}
					}
				},
				playerVars: {
					autoplay: 1,
					controls: 0,
					disablekb: 1,
					start: 12, // IN SECONDS
					//end: 300,
					fs: 0,
					iv_load_policy: 3,
					loop: 1,
					modestbranding: 1,
					playsinline: 1,
					rel: 0,					
					showinfo: 0,
					enablejsapi: 1
				}
			});

			function onPlayerReady() {
			  	
			  	// bind events
			  	var playButton = document.getElementById("play");

			  	playButton.addEventListener("click", function() {
			    	this.player.playVideo();
			  	});

			  	var pauseButton = document.getElementById("pause");

			  	pauseButton.addEventListener("click", function() {
			    	this.player.pauseVideo();
			  	});

			  	/*document.getElementById('play').onclick = function() {
			        this.player.playVideo();
			    };
			    document.getElementById('pause').onclick = function() {
			        this.player.pauseVideo();
			    };*/

			}

						
		},
		
		/* WHETHER THE VIDEO IS PAUSED. @return {boolean} */

		isPaused: function() { return YT.PlayerState.PAUSED === this.player.getPlayerState(); },

		/* PAUSE THE VIDEO */

		pause: function() {
			this.player.pauseVideo(); 
	  	},

		/* PLAY THE VIDEO */

		play: function() {
			this.player.playVideo(); 
		}

	});

see! how do I get those emojis back that are showing above in my thread? lol omg….