mediaelement.js - Responsive video with fixed max size

问题

How can I set up mediaelement.js to scale videos down for small screen sizes, but not to scale them up above their actual size? (Other than wrapping it in a correctly sized div, which is what I will fall back to if I can't find a better solution.)

I've tried setting style="max-width: 100%; and this works in Firefox using videos on my own server, but in Chrome, and in both Firefox and Chrome when linking to YouTube videos, the videos will scale up to fill the container regardless of the width="" and height="" values set for the <video> tag.

I'll give an example of my HTML and the first part of the output. The following:

<video width="480" height="360" style="max-width: 100%;" src="http://example.com/video.mp4"></video>

Produces this in Firefox (which 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 in Chrome (which is not what I 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 accepted method for accomplishing this?

回答1:

If you use the Firefox output code

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

in your original script, it should fix the problem and keep the output code consistent across Firefox and Chrome.

来源：https://stackoverflow.com/questions/22872915/mediaelement-js-responsive-video-with-fixed-max-size

标签

html

css

video

responsive-design

mediaelement.js