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