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 · 5 comments
Open

Comments

@ShaimaaHamdan
Copy link

@ShaimaaHamdan ShaimaaHamdan 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
Copy link

@pustulio pustulio 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
Copy link
Author

@ShaimaaHamdan ShaimaaHamdan 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
Copy link
Owner

@moay moay 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
Copy link
Author

@ShaimaaHamdan ShaimaaHamdan 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 ?

@mayeaux
Copy link

@mayeaux mayeaux commented Aug 31, 2021

Same with me, still displays on load then hides

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants