Remove Big play button and show the bottom play menu

Question

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:

Inauspicious

Answer 1

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;
}

Seka

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 – Jeanejeanelle

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. – Inauspicious

Answer 2

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! =)

Freighter

Answer 3

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;
}

Daladier

Answer 4

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;
}

Piotr

Answer 5

This is what worked for me in JW Player for anyone that might have been looking for that answer:

#PlayVid_display_button_play {display:none!important;} #PlayVid_display_button {background:none!important;}

Heymann