How to hide the big play button at the beginig of load the player ?

[ShaimaaHamdan]

Hello Again , looks like i will be here for too long time :D I need to hide the big play button which load at the beginig of the player i used the following code

.vjs-afterglow-skin .vjs-big-play-button {
display: none !important;
}
but it is not working any idea ?
thanks Again !

[pustulio]

Hi, I'm using the lightbox with vimeo and don't know if its gonna help you but what I did, was a function to locate the css and overwrite it with none.

I made an array for all the videos on my site. It's a little messy workaround.

$(function() {
    "use strict";
    const fta = function(){
  		$('.video-js.vjs-using-native-controls .vjs-poster').css('display', 'none');
  		$('.vjs-afterglow-skin.vjs-using-native-controls .vjs-big-play-button').css('display', 'none');
    }

    const idList = [
    	'idarray01',
    	'idarray02',
    	'idarray03'
    ]

    idList.forEach(id => {
    	afterglow.on(id, 'ready', function(){
  			fta();
		});
    });


    
});

[ShaimaaHamdan]

Hello , I tried your way but it is not work at all the css classes not their in the ready state , following is my code
$(document).ready(function () {
console.log("ready!");
afterglow.on('my-player', 'ready', function () {
$('.video-js.vjs-using-native-controls .vjs-poster').css('display', 'none');
$('.vjs-afterglow-skin.vjs-using-native-controls .vjs-big-play-button').css('display', 'none');
});
});

[moay]

Just add this to your styles:

.vjs-afterglow-skin .vjs-big-play-button:before {
    content: "" !important;
}

Make sure it is placed behind afterglow in your html markup.

[ShaimaaHamdan]

hello , i tried this but it is not working , the button always appears at the beginig can you post me code sample for the orders of the code ?

[mayeaux]

Same with me, still displays on load then hides