How to configure mediaelement.js to scale the video down for small screen sizes, but not to scale them above their actual size? (Also, wrapping it in a div with the right size is what I will return to if I cannot find a better solution.)
I tried setting style="max-width: 100%; and this works in Firefox using videos on my own server, but in Chrome, as well as in Firefox and Chrome, when connected to a YouTube video, the video is scaled to fit the container regardless of in addition, the width="" and height="" values set for the <video> .
I will give an example of my HTML and the first part of the output. Following:
<video width="480" height="360" style="max-width: 100%;" src="http://example.com/video.mp4"></video>
Produces this in Firefox (this is what I want):
<div class="mejs-container svg mejs-video" id="mep_0" style="width: 480px; height: 360px;"> <div class="mejs-inner"> <div class="mejs-mediaelement"> <video width="480" height="360" src="http://example.com/video.mp4" style="max-width: 100%;"></video>
And this is in Chrome (which I don't want):
<div id="mep_0" class="mejs-container svg mejs-video" style="width: 864px; height: 648px;"> <div class="mejs-inner"> <div class="mejs-mediaelement"> <video width="864" height="648" style="max-width: 100%; width: 100%; height: 100%;" src="http://example.com/video.mp4"></video>
Is there an acceptable way to do this?
nHaskins
source share