Responsive audio and video

I have also been trying to hack around to get this to work with no such luck. It looks like mediaelement.js doesn't support % widths. Any thoughts on this mfer?

would this work? http://fitvidsjs.com/

I just did a small hack to the code that works for me. Lines 113 - 120 of mediaelement.module, remove the cast to (int) on the settings variables.

    if ($display['type'] == 'mediaelement_video') {
      $js_settings['opts']['videoHeight'] = $settings['height'];
      $js_settings['opts']['videoWidth'] = $settings['width'];
    }
    elseif ($display['type'] == 'mediaelement_audio') {
      $js_settings['opts']['audioHeight'] = $settings['height'];
      $js_settings['opts']['audioWidth'] = $settings['width'];
    }

This is allowing me to enter 100% on the settings form, and it's working for audio files. (I'm not doing video on this site, so can't check that right now.) The labeling on the Manage Display form is wrong (it says 100% px), but otherwise, this is working for me.

This works with video as well. I set both width and height to 100% and got good results.

FYI, this was added the the mejs here: https://github.com/johndyer/mediaelement/issues/283.

Can we get this added in the next commit for dev? I've patched against 7.x-2.x (which I think is 1.2???).

The following patch utilizes the fixes proposed by zengenuity and also fixes some of the UI WTF for the field formater, so a user doesn't see width: 90% px and some help text that tells the user to enter a px or % along with their width/height values.

Sorry, here's a better one

Did some more testing and appears that Version MediaElement.js 2.2.2 (2011/10/07) only added support for <del>`<video width="100%" height="100%"></video>`</del> `<video style="width:100%;height:100%"></video>

The good news is that we can actually make the height maintain the aspect ratio though. Reworked the patch to specify 100% in UI for users.

We may need to add some validation to make sure a user doesn't add 80% or leave out specifying px or %, then wonder why it isn't working. Otherwise it works swimmingly.

#7 works for me.

From my perspective, responsiveness is the killer feature for MediaElement.js. I haven't seen another player that handles it as well. Can we get this committed?

#7 works for me too.
Please commit!

I have opposite problem. I need width and height controlled but Media element screen always fills full width of DOM box (excl. padding) no matter how I configure it on File types or in Manage Fields Display of content types (I need video as separate fields).

How to overcome responsiveness?

OK, I discovered that the newest js library provides responsive player. After switching to v. 2.9.0-2... all is OK.

#7 works for me for audio, haven't tried video yet. Thanks.

That patch tested fine for me, too.

#7 patch worked fine against latest dev version. 15th Jan 2012.

$ patch < responsive_width-1348816-7.patch
patching file mediaelement.module
Hunk #1 succeeded at 111 (offset -23 lines).
Hunk #2 succeeded at 199 (offset -23 lines).
Hunk #3 succeeded at 231 (offset -23 lines).

Not sure it's required though as the player appears to be already responsive given previous library comments.

Can this issue just be closed and marked as fixed?

#7 worked for me as well... please commit!

Just applied this patch and it works great. It seems silly not supporting fluid video when this library is meant to work on all devices. Let's commit this patch.

Do we need to escape the width and height values before outputting them into JavaScript? I'm not sure these values can be trusted?

We may need to add some validation to make sure a user doesn't add 80% or leave out specifying px or %, then wonder why it isn't working. Otherwise it works swimmingly.

I think this should be attempted as well.

I think it makes sense to default to px if the user doesn't specify a unit. That way we won't break existing sites when they upgrade.

Just applied it myself (#7). Works beautifully in my responsive panels layout. Commit!

I think it makes sense to default to px if the user doesn't specify a unit. That way we won't break existing sites when they upgrade.

I had an existing site I applied the patch to, and this was just the behavior: it defaulted to px and kept the pixel dimensions I had previously supplied.

Patch works as expected, however when viewing the media player within Opera & IE8 the video doesn't have a default size and shows up at a thumbnail size. Anyone experienced this issue?

Screenshot

#7 Patch worked as expected.

Since the relevant functions have been moved to mediaelement.field.inc, patch #7 won't work anymore - I've attached a new patchfile which will work for the current dev-version of mediaelement

Latest patch works fine.

Reviewed and tested. #24 works fine

trying to apply the patch #24 with GnuWin32 uder the folder sites/all/modules/mediaelement but apparently it cannot find the file mediaelement.field.inc to patch. Can someone help me and tell me where is the mediaelement.field.inc located?

Just realized I didn't read carefully. I am having the wrong version of media element. Update to 7.1.x and the patch under #24 works right away. Thanks.

Reviewed and tested. #24 works fine
mediaelementjs 2.15.1

Sometimes I wonder why I bother

thanks for the patch fatel... glad looked through issue que
24# - ready to commit

Patch in #24 applies to current dev release but having some difficulties with the configuration of YouTube videos. With width="100%" and height="auto" or blank results in narrow iframe all the time. The aspect ration of youtube video is correct and shows as thumbnail size when playing.

Any suggestions would be appreciated.

Patch on #24 to latest dev which patched correctly and works with an older library version however when using mediaelement.js 2.16.4 (latest) it didn't work. I believe it was 2.13.1 (2013/09/06) that did work.

Edit:

Will try the library version between the working and broken.

Can you please commit this Mr Maintainer? It's been quite a while since there's been a stable release.

Many thanks

@kingfisher64 Thanks for the feedback. Can't see being dependent on an older version of the library but it may help to resolve what is going on with this issue. Thanks.

Based on comments #33 & #34 that this patch is not working with the latest release of the library mediaelement-2.16.4 I have changed the status to needs work.

[edit] Comment #29 indicates the problem comes after mediaelement-2.15.1 [/edit]

I must beg for your forgiveness. I have dug into this deeper and think my interpretations in previous comments were wrong. This patch behaves the same with the most recent version of the library mediaelementjs-2.16.4

My problems seemed to be related to correctly configuring File types >> Manage file display.

It definitely needs caches to be flushed.

And it does not seem to work for youtube video but fitvids takes care of that.

Sorry for the noise.

I have reset the status to RTBC.

Just wanted to put in my thoughts on this. I applied the patch and it doesn't work for me. When I change the field display to use 100% width and use firebug to view the results, on the right side (the style window), it tells me the 100% is into effect, but in multiple locations on the left side (the html window), it appears as though 300px is hard-coded into multiple areas. Am I reading too much into this? Either way, it's not working or responsive for me. (image uploaded to show what I'm seeing)

I haven't looked into this enough, but patch #24 doesn't seem to work on its own.

For this to work, I needed the following css.

.mediaelement-video {
  position: relative;
  width: 100%;
}

.mediaelement-video:before{
  content: "";
  display: block;
  padding-top: 56.25%; /* for 16:9 aspect ratio */
}

.mejs-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  outline:none;
}

So I'm changing to needs review, but feel to contest or explain how this should work.

Cheers

Changing back to "Needs work" until the broken issues are addressed in a patch. #37 sounds like it may need more significant changes than just CSS.

The patch works for me. I'm not seeing height 100% in any of the problem examples provided. You have to make both the height and width 100% to make the video responsive. I know that's not logical but it doesn't seem to turn on responsive mode unless they both are. The style attribute in my related html does use hardcoded px values like in the above screenshot, but they are updated by javascript when I resize my browser.

I couldn't find this documented on the official page but the height 100% thing is documented in this blog article and you can see it present on the responsive demo on the mediaelement.js github.

I can confirm that the patch works for the audio player with the latest mediaelement libarary version (2.20.0). I had to update the Mediaelement library for everything to work properly on the responsive audio player.

#4 work for me, beatiful

#24 without #38 and in field display settings set heigth and width to 100% works perfect on a boostrap sub-theme

The patch in #24 no longer applies to 7.x-1.x-dev so setting back to needs work for now.

Please find attached new patch that applies to 7.x-1.x-dev and fixes issue with responsive elements.

I tried patch #45 and I got this response:

can't find file to patch at input line 5
Perhaps you should have used the -p or --strip option?
The text leading up to this was:
--------------------------
|diff --git a/mediaelement.field.inc b/mediaelement.field.inc
|index c8b20b26..c83ff75a 100644
|--- a/mediaelement.field.inc
|+++ b/mediaelement.field.inc
--------------------------

Indeed, I don't have mediaelement.field.inc. Which file is it supposed to patch?

Hi @vchen

Make you sure you are patching the dev version of the module:

https://www.drupal.org/project/mediaelement/releases/7.x-1.x-dev

The patch applies cleanly. However when I configure a video with 100% for the height and width, the player breaks. This needs to be dug into a little more.

Hi @jnettik,

Can you provide more information on how / when the player breaks?

Screenshots would also be helpful.

Also, try enabling automatic Preload for your video field, let us know!

@bmunslow: Preload was the key for me. This works as expected. Thanks for the work from everyone on it. Committed!