Adapt Learning Community: Media is the wrong size when Article Reveal opens

I’m using contrib-media within article-reveal. I noticed that the widget wasn’t sized the usual 900 x 506 as are the other instances of Media not used inside an Article Reveal. I don’t know what code sets the width and height of `mejs-container`.

I am able to reset the width of the Media component when Article Reveal opens. Article Reveal triggers `device:resize` when it opens. I added the .mejs-container selector to the following function:
```javascript
this.$('audio, video, .mejs-container').width(this.$('.component-widget').width());
```

But I have been unable to discover what sets the height. I tied `setupPlayer` to `article:revealed` but it did not give the right height.

I do not want to set the height to a specific dimension, such as 506px, because this style is being set on the element. It is the wrong height for mobile. I need a more responsive strategy for resizing both width and height of Media when Article Reveal opens.

Thoughts?

To replicate,
1. Download and run cgkineo’s Kitchen Sink (https://github.com/cgkineo/adapt-kitchen-sink)
2. Add a new block with Media to the article with Article Reveal.
3. Rebuild and run.
4. Open the Reveal.
5. Compare the dimension of the Media widget/poster image with the dimensions of Media that appears elsewhere in the course (outside of Article Reveal).

I'm using framework version 2.1.3

Am pretty sure that the height of .mejs-container is being set by the function setPlayerSize (which is bound to the window.resize event) in mediaelement-and-player.js

IIRC the <video> element has an intrinsic ratio so if you don't set a height and just set the width the browser will automatically calculate the correct height based on the video's aspect ratio.

It's interesting to note that - in Firefox at least - the functionality is unaffected if you comment out the contents of onScreenSizeChanged (in adapt-contrib-media.js) - my guess is that's probably a browser-specific hack (probably for IE8!) that's not been been commented as being such.

Show parent | Reply

That's helpful, Matt.
Doesn't look like window.resize is being called by revealArticle. And I don't know how .velocity() works. I was successful when I added $(window).resize(); before Adapt.trigger("device:resize"); found at line 108. Is this reasonable or could I be overlooking something?

Show parent | Reply

No, that's entirely reasonable (sorry for slow response!)...

From what I can see we've somehow ended up at a point where some thing respond to $(window).resize(); and some to Adapt.trigger("device:resize");. so this doesn't surprise me at all.

I've also found some notes from an old project that show that sticking .css({"display": "block"}) into L104 just before .velocity("slideDown", (etc) will help

Show parent | Reply