Customizing mejs video container

  • naenara

    (@naenara)


    12 years ago

    Hey there,

    I’ve been trying to set up a fitting layout for posting .webm and .mp4 videos on my blog. After some googling I found the following:

    .mejs-container {
  width: 100% !important;
  height: auto !important;
  padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
  width: 100% !important;
  height: 100% !important;
}
.mejs-mediaelement video {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
}

    I wanted to increase the width of the videos from the default 474×270 to something larger, but it didn’t quite work as intended.
    http://i.imgur.com/vOuOFNT.jpg

    The height is set to auto, so I don’t know why it doesn’t increase as well. Setting the height manually works obviously, but not all videos are 16:9.

    Any ideas on how to set the height according to width while keeping the aspect ratio?

The topic ‘Customizing mejs video container’ is closed to new replies.