Responsiv Mediaelementaudio

Responsiv Mediaelementaudio

by Kaspar Bredahl Rasmussen -
Number of replies: 8
I use the filter mediaelementaudio giving the students an easy opportunity to download the audio.

To make a responsive version (the standard 400 width is too big for smaller mobile screens) I have done the following:

<div class="d-none d-md-block">
{POODLL:type="mediaelementaudio_cdn",VIDEOURL="xxx",WIDTH="650"}
</div>

<div class="d-none d-sm-block d-md-none">
{POODLL:type="mediaelementaudio_cdn",VIDEOURL="xxx",WIDTH="450"}
</div>

 <div class="d-block d-sm-none">
{POODLL:type="mediaelementaudio_cdn",VIDEOURL="xxx",WIDTH="300"}
</div>

Is functions fine as html in ATTO.
I would like to do a new filter doing the same. But when I try to do it with mediaelementaudio_cdn as a template then the audio disappears.

Any suggestions to how this can be fixed?
Average of ratings: -
In reply to Kaspar Bredahl Rasmussen

Re: Responsiv Mediaelementaudio

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers
Can you attach your template here, so I can try it out?
Average of ratings: -
In reply to Justin Hunt

Re: Responsiv Mediaelementaudio

by Kaspar Bredahl Rasmussen -

Hi Justin,

After a night sleep I actually solved it in an easier way. I just created a CSS class with max-width:100% that keeps the player within the screen on a mobil phone as well.

My original take was to do like this:

<div class="d-none d-md-block">

<audio id="@@AUTOID@@" src="@@VIDEOURL@@" width="@@WIDTH@@" height="@@HEIGHT@@" class="nomediaplugin breddemax " preload="auto"'></audio>


<a id="@@AUTOID@@_download_button" class="@@CANDOWNLOAD@@ nomediaplugin"  href="@@VIDEOURL@@" download >Download</a>

</div>

 

<div class="d-none d-sm-block d-md-none">

<audio id="@@AUTOID@@" src="@@VIDEOURL@@" width="450" height="@@HEIGHT@@" class="nomediaplugin breddemax " preload="auto"'></audio>


<a id="@@AUTOID@@_download_button" class="@@CANDOWNLOAD@@ nomediaplugin"  href="@@VIDEOURL@@" download >Download</a>

</div>

 

<div class="d-block d-sm-none">

<audio id="@@AUTOID@@" src="@@VIDEOURL@@" width="300" height="@@HEIGHT@@" class="nomediaplugin breddemax " preload="auto"'></audio>


<a id="@@AUTOID@@_download_button" class="@@CANDOWNLOAD@@ nomediaplugin"  href="@@VIDEOURL@@" download >Download</a>

</div>

 I don't know if the same AUTOID confused it ...

Average of ratings: -
In reply to Justin Hunt

Re: Responsiv Mediaelementaudio

by Kaspar Bredahl Rasmussen -

On a small iphone s5 screen the show is NOT perfect though. 



Average of ratings: -
In reply to Kaspar Bredahl Rasmussen

Re: Responsiv Mediaelementaudio

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers
Its quite tricky to fiddle with this. The MediaElement CSS does its own job of making it responsive, if you let it.
https://github.com/mediaelement/mediaelement/blob/master/docs/usage.md#use-stretching-modes
I did this by adding: 
style="max-width: 100%; width: 100%;"
to the audio player tags. I attached the bundle.

And it shrinks quite nicely on my phone, though on my iphone simulator it looks like what you displayed.
However the audio player becomes really wide(100%) when its in a wider area, and setting a max-width to a fixed value doesn't help.
Sorry not to be more help here.
Average of ratings: -
In reply to Justin Hunt

Re: Responsiv Mediaelementaudio

by Kaspar Bredahl Rasmussen -

That’s Strange. The max-width didn’t function before I put there as a class. Before that it was keeping the 400px (or the setting of the user) also on mobile phones. 

After I added the class everything is fine (expect for the insufficient space for displaying the number on one line). 



Average of ratings: -
In reply to Kaspar Bredahl Rasmussen

Re: Responsiv Mediaelementaudio

by Kaspar Bredahl Rasmussen -
Sorry, now I understood that you did a “new” version. It’s nearly the same approach as in mine bundle smile
Average of ratings: -
In reply to Kaspar Bredahl Rasmussen

Re: Responsiv Mediaelementaudio

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers
Yes I removed the width attribute on the player.
smile
Average of ratings: -
In reply to Justin Hunt

Re: Responsiv Mediaelementaudio

by Kaspar Bredahl Rasmussen -

Btw. I had a problem with the showing of the shadow player in a Moodle Quiz (a poodle question) The player was jumping outside the box!

And I solved this by adding this to the CSS:

.poodll_status_shadow {

display: none;

}

Attachment Skærmbillede 2019-08-07 kl. 15.11.13.png
Average of ratings: -