Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ShaimaaHamdan opened this issue Mar 14, 2019 · 4 comments

Comments

Projects
None yet
3 participants
@ShaimaaHamdan
Copy link

commented Mar 14, 2019

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

This comment has been minimized.

Copy link

commented Mar 18, 2019

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

This comment has been minimized.

Copy link
Author

commented Mar 20, 2019

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

This comment has been minimized.

Copy link
Owner

commented Mar 20, 2019

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

This comment has been minimized.

Copy link
Author

commented Mar 20, 2019

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 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.