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: enter image description here

score 12 · Accepted Answer · answered Jul 17 '13 at 15:31

12

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

answered Jul 17 '13 at 15:31

Andrew Howard

2,818
5
33
59

That's how I would do it. There's a new skin designer where you can play around with the CSS a little easier. http://designer.videojs.com – heff Jul 17 '13 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 '13 at 13:21

score 7 · Answer 2 · answered Feb 14 '17 at 03:47

7

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

answered Feb 14 '17 at 03:47

jabs

71
1
1

score 7 · Answer 3 · answered Jan 18 '21 at 17:43

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

score 2 · Answer 4 · answered Oct 26 '16 at 06:01

2

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

answered Oct 26 '16 at 06:01

David

129
1
5

score 0 · Answer 5 · answered Oct 02 '14 at 21:02

0

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

answered Oct 02 '14 at 21:02

Elon Zito

2,872
1
24
28

Remove Big play button and show the bottom play menu

5 Answers5