mediaelement.js - 如何像 YouTube 播放器一样在播放器中居中播放视频？

Question

我需要创建一个（例如）600px 宽的播放器，而视频只有 300px 宽。我希望视频在视频区域内缩放并居中，就像我的播放器太宽时 YouTube 播放器会做的那样。

这就是我的意思（视频以控制为中心）：

在我尝试让它工作时，播放器控件的宽度似乎与实际视频的宽度相关联，所以当我的视频只有 300 像素宽时，播放器控件最终为 300 像素。

有任何想法吗？

Answer 1

您可以尝试少关注

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

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

        video { width: 100% !important; }
    }

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

Answer 2

2/16/2017 更新 - 我改编了 @smiffy6969 的答案以使用 3.1.2 版本中使用的新类。

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