Can't get big play button to hide during playback?

[ev0net]

Hi. I've spent a lot of time scouring the internet and trying things for why the big play button won't hide during playback. Everything else is working as expected, but this.

My guess is something is happening in the way I'm initiating the player that causes ".vjs-big-play-button" to have no effect.

Any thoughts or advice would be greatly appreciated. Thanks!

** - - - Attempts to hide big play button that don't work - - -**

/* BIG PLAY BUTTON HIDE: ATTEMPT #1 */
.video-js .vjs-has-started .vjs-big-play-button {
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}

.video-js .vjs-paused .vjs-big-play-button {
opacity: 1;
pointer-events: all;
transition: opacity 0.5s;
}

/* BIG PLAY BUTTON HIDE: ATTEMPT #2 */
.video-js .vjs-big-play-button {
display: none;
}

.video-js .vjs-playing .vjs-big-play-button {
display: block;
}`

** - - - other custom css - - - **

`.video-js {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
color: #00ff00;
background-color: #000;
position: relative;
padding: 0;
font-size: 10px;
line-height: 1;
font-weight: normal;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
word-break: initial;
}

.video-js .vjs-progress-control .vjs-mouse-display {
display: none;
position: absolute;
width: 10px;
height: 100%;
background-color: #000;
z-index: 1;
}

/* WORKING: ALIGN BIG PLAY BUTTON /
.video-js .vjs-big-play-button {
line-height: inherit;
/ height: 3em; / / you can set a new height */

margin-top: unset;
margin-left: unset;
transform: translate(-50%, -50%); 

}
/* WORKING: ALIGN BIG PLAY BUTTON */
.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
position: inherit;
top: unset;
left: unset;
display: flex;
justify-content: center;
align-items: center;
}

/* WORKING: SHOW CONTROL BAR ON STARTUP */
.video-js .vjs-control-bar {
display: flex;
}

** - - - player is created in php - - - **

	if(!isset($GLOBALS['evonet_player_counter'])) {
	
		// !!!IMPORTANT: embeded variables
		$GLOBALS['evonet_player_counter'] = 0;
		$videoStr .= <<<EOT
		
		<style type="text/css">@import url("$videoJsPath/video.js/dist/video-js.css");</style>
		<style type="text/css">@import url("$videoJsPath/evonet/videojs-evonet.css");</style>
		<script src="$videoJsPath/video.js/dist/video.min.js"></script>
		<script src="$videoJsPath/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.min.js"></script>
		<script src="$videoJsPath/videojs-hls-quality-selector/dist/videojs-hls-quality-selector.min.js"></script>
		<script src="$videoJsPath/videojs-abloop/dist/videojs-abloop.min.js"></script>

EOT;

}

// !!!IMPORTANT: embeded variables
$playerId = $GLOBALS['evonet_player_counter'];
$videoStr .= <<<EOT

<video 
	id="evonet-video-$playerId" 
	class="video-js vjs-fluid vjs-show-big-play-button-on-pause" 
	controls 
	preload="none" 
	poster="$posterUrl">
	<source src="$fileUrl" type="application/x-mpegURL" />
</video>
<script>
var player = videojs("evonet-video-$playerId",{
	controlBar: true,
    loadingSpinner: true,
	responsive: true,
	playbackRates: [0.5, 0.6, 0.7, 0.8, 0.9, 1, 1.25, 1.5, 1.75, 2],
	html5: {
		nativeAudioTracks: false,
		nativeVideoTracks: false,	
		vhs: {
			cacheEncryptionKeys: true,
			overrideNative: true,
		}
	},
	plugins: { abLoopPlugin: {} }
});

player.hlsQualitySelector( { displayCurrentQuality: true, placementIndex: 10, } );
player.ready(function(){ this.abLoopPlugin.setStart().setEnd(false).playLoop().disable(); });
</script>

EOT;

[ev0net]

FYI: I finally found an answer. For my initiation it needs this code in the script section:

player.ready(function () {
videojs("evonet-video-$playerId").ready(function () {
var myPlayer = this;
myPlayer.on("pause", function () {
myPlayer.bigPlayButton.show();
});
myPlayer.on("play", function () {
myPlayer.bigPlayButton.hide();
});
});
});