Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Is there any possibility to remove to middle play button at start (yes I know I could just remove the css class) and instead show the bottom play bar?

Basically what I would like to achieve is to show the video (with poster image) and the play-menu already showing when I enter a page with a video.

Thanks in advance!

Update:

I did as Andrew said and now it's almost working. Now the bar is there but unfortunately there's an empty space above the play control bar. When i press play the poster image changes to the actually movie and the empty space is filled with the video, but when it's showing the poster it doesn't fill all the way. Why is this?

Here's an image explaining the issue:

Why not do both in css? Just add the following lines at the bottom of the css.

Turn off the big play button:

.vjs-default-skin.vjs-paused .vjs-big-play-button 
display: none;
And then turn on the menu:
.vjs-default-skin.vjs-paused .vjs-control-bar
display: block;
                That's how I would do it. There's a new skin designer where you can play around with the CSS a little easier. designer.videojs.com
– heff
                Jul 17, 2013 at 17:52
                Thank you, I tried that and it works! But now I got a poster issue instead. I updated my initial post with the issue and a screenshot.
– Triphys
                Jul 18, 2013 at 13:21
The accepted answer did not work for me, I suspect my version of video.js is newer. For an updated answer that is current for video.js 5.16:
.video-js .vjs-big-play-button {
    display: none;
.video-js .vjs-control-bar {
    display: flex;
Hey I have been struggling with this too, Docs are not intuitive at all!
Im implementing Video JS in React Hooks, so I solved with bigPlayButton set to false;
useEffect(() => {
    let player = videojs('my-player',{
        autoplay: 'muted',
        sources: [
                src: videoUrl, // m3u8 format
                type: "application/x-mpegURL"
        controlBar: false,
        loadingSpinner: false,
        bigPlayButton: false
    player.play()
    return () => {
        player.dispose()
}, [])
Hope it helps! =)
To turn on menu use flex instead of block, so it won't break control bar into pieces:
.vjs-default-skin.vjs-paused .vjs-control-bar
    display: flex;
This is what worked for me in JW Player for anyone that might have been looking for that answer:
    #PlayVid_display_button_play {!important;}
    #PlayVid_display_button {background:none!important;}

        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.