CODEWITHSUNDEEP
buttonmenuplaybackvideo.js
Triphys
Triphys

Reputation: 133

Remove Big play button and show the bottom play menu

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

Upvotes: 11

Views: 21727

Answers (5)

Carlos Mori
Carlos Mori

Reputation: 408

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

Upvotes: 9

jabs
jabs

Reputation: 71

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

Upvotes: 7

David
David

Reputation: 139

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

Upvotes: 2

simsketch
simsketch

Reputation: 3042

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

Upvotes: 0

Andrew Howard
Andrew Howard

Reputation: 3072

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

Upvotes: 13

Related Questions