Awesome Dre, thanks for sharing!
Our solution for our video repo was pretty similar. We used the padding-trick to force a 16:9 ratio
padding-top: 57.25%;
position: relative;
width: 100%;
For those who aren't using MEJS and using something like YouTube, here's a post I wrote a year or so ago [I guess sometime before we settled on the name "LibraryLearn"] about forcing responsive styles on a YouTube/Vimeo embed:
http://ns4lib.com/responsive-youtube/
TL;DR: it's basically the above plus the following styles on the iframe:
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
-----Original Message-----
From: Code for Libraries [mailto:[log in to unmask]] On Behalf Of Andreas Orphanides
Sent: Thursday, July 10, 2014 11:45 AM
To: [log in to unmask]
Subject: [CODE4LIB] mediaelement.js and responsive design -- helpful hints
Hey all,
Our web team has been incrementally migrating our website over to a responsive design based on foundation.js, and it's presented lots of interesting challenges. I use mediaelement.js to manage video playback for our instructional tutorials, and the combination of MEJS's rendering habits and Foundation's resize flow leads to some frustrations.
But I came up with a decent, purely CSS solution that allows friendly video resizing without doing anything to wacky, and I thought I'd share it. If you use mediaelement.js on a responsive site, and you want decently friendly video display, you might give it a crack.
Summary:
We'll use CSS along with a couple of tricks and minor abuse of the !important flag to override MEJS's default video dimension rendering behavior. We'll allow MEJS to determine the video dimensions until the browser width is close to the video's width.
This has been tested with MEJS version 2.14.2 and Foundation 5.2.0 on Chrome 35, Firefox 30, and IE 10 (windows all).
Assumptions:
- Single column display (You could probably modify it to work for
multiple columns with some tweaks, but I haven't gotten there yet)
- You know the video dimensions / aspect ratio (in this example, we
assume 640x480 video, i.e., a 4:3 aspect ratio)
- Your <video> element is in a dedicated container (e.g., a div) with a
class that we'll call "videoContainer".
- No major modifications to default mediaelementplayer.css
I don't know how much of the CSS is overkill -- some of it I inherited from our web team -- but it seems to work decently well. If you want to see it in action, check out the following URL:
http://www.lib.ncsu.edu/tutorials/picking_topic/
CSS is below for your enjoyment. I hope you find it useful! At this point, this is the result of a lot of guesswork and a few helpful hints from StackOverflow, so I'm not sure how much specific advice I could give, but I'm happy to try.
Thanks,
Dre.
--- Hark! CSS below! ---
/* Only start overriding when browser is close to video dimensions. (Adjust PX count for your video dimensions and website padding, etc) !important flag is important (ha!) to override style attributes that MEJS adds to tags. Also note that the pixel count here may not be (doesn't have to be) one of your Foundation breakpoints. */
@media (max-width:680px){
/* These declarations force the video element to resize with the browser. */ .videoContainer .mejs-container.svg.mejs-video, .videoContainer .mejs-overlay.mejs-layer.mejs-overlay-play,
.videoContainer .mejs-poster.mejs-layer, .videoContainer .mejs-captions-layer.mejs-layer, .videoContainer video{
margin: 0 !important;
text-align: center;
width: 100% !important;
height: auto !important;
}
/* This forces the dimensions of the video container to retain the 4:3 ratio. Adjust percentage if your video is a different ratio. (16:9 is 56.25%). This works because "padding"
attribute dimensions are always calculated using element width. Something like the "height" attribute would derive its value from the parent element's height, which we don't want. */
.videoContainer{
padding-bottom: 75%;
position: relative;
}
/* These declarations force the child elements that MEJS creates to render relative to the videoContainer object. */
.videoContainer .mejs-layer, .videoContainer .mejs-container, .videoContainer .mejs-overlay {
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: auto !important;
}
}
