CODEWITHSUNDEEP
mediaelement.js
Redtopia
Redtopia

Reputation: 5247

How do I center a video inside the player like the YouTube player?

I need to create a player that is (for example) 600px wide and the video is only 300px wide. I want the video to be scaled and centered inside the video area, just like the YouTube player would do if my player was too wide.

This is what I mean (video is centered within control):

Notice video is centered inside the control

In my attempts to get this to work, the width of the controls for the player seem to be tied to the width of the actual video, so when my video is only 300px wide, the player controls end up being 300px.

Any ideas?

Upvotes: 1

Views: 992

Answers (2)

JonH
JonH

Reputation: 821

2/16/2017 Update - I adapted @smiffy6969's answer to use the new classes used in the 3.1.2 version.

.mejs__container { width: 100% !important; }
.mejs__mediaelement { text-align: center; }
.mejs__overlay-play { position: static; }
.mejs__poster { width: 100% !important; position: static; }

Upvotes: 1

smiffy6969
smiffy6969

Reputation: 21

You could try following less

.mejs-container 
{ 
    width: 100% !important; 

    .mejs-mediaelement
    {
        text-align: center !important;

        video { width: 100% !important; }
    }

    .mejs-overlay-play
    {
        position: static !important;
    }
}

Upvotes: 2

Related Questions