iframe responsive in app doesn't work

Re: iframe responsive in app doesn't work

by Juan Leyva -
Number of replies: 3
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Hi Willy,

I think this was the only way to fix it, can you share here the code you added in the wsplayer.php file?

We were thinking in integrating similar into core.

In reply to Juan Leyva

Re: iframe responsive in app doesn't work

by Vanessa Skiadelli -
Hi Juan,

We have the same problem with our Vimeo videos and how they display on the mobile app. I was wondering if a fix is scheduled to be added in the core app for this and how soon would that be.

Thanks

Vanessa

In reply to Vanessa Skiadelli

Re: iframe responsive in app doesn't work

by Juan Leyva -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Hi Vanessa,

we've applied several fixes recently, could you describe your exact issue/problem?

Thanks, Juan

In reply to Juan Leyva

Re: iframe responsive in app doesn't work

by Vanessa Skiadelli -

Hi Juan,

I use the css code that makes the vimeo video responsibe on our moodle platform. This works fine on browser.

Code is exactly the same as Willy Gomez has given in previous post in this thread;

CSS

.videocontenedor{ max-width: 800px; max-height: 451px; }

.video-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; }

.video-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; }

HTML

<div class=" videocontenedor">
<div class="video-responsive iframe">
<iframe src="https://player.vimeo.com/video/257059412" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="">
</iframe></div></div>


I have copied the same code in the mobile.css but this is what I get when I view on mobile app/desktop app.

video on mobile app


I get scroll bars and the i-frame is bigger than the container.

Inspection of the html code shows the following:

<iframe src="https://laws.elearning.london.ac.uk/media/player/vimeo/wsplayer.php?video=295594936&amp;token=88492976f403337f56ce399ff89a62c1&amp;width=450&amp;height=450" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" class="core-media-adapt-width" width="450" height="450" style=""></iframe>

So it looks that wsplayer.php forces a width and height to the iframe of 450.

Let me know if you need further details.

Kind regards

Vanessa