iframe responsive in app doesn't work

iframe responsive in app doesn't work

Willy Gomez -
回帖数：7

Hi.

I use this code to make responsive an iframe from vimeo in my site, when used in browsers it works fine, but in app it doesn't work responsive... could you help me? thanks

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>



平均分： -
回复Willy Gomez

Re: iframe responsive in app doesn't work

Juan Leyva -
Core developers的头像 Moodle HQ的头像 Particularly helpful Moodlers的头像 Plugin developers的头像 Testers的头像

Hi,

the CSS classes you are using are not part of the Mobile app, you should create a Moodle Mobile remote theme including those classes and try again.

See https://docs.moodle.org/dev/Moodle_Mobile_Themes

平均分： -
回复Juan Leyva

Re: iframe responsive in app doesn't work

Willy Gomez -

Gracias Juan.

El problema es que no logro hacer que un video de vimeo se comporte responsive, utilizo iframe incrustrado. Tienes idea de cómo puedo hacer para que el video  incrustrado de vimeo se comporte responsive?


Gracias miles

平均分： -
回复Willy Gomez

Re: iframe responsive in app doesn't work

Willy Gomez -
I believe that I found the problem:

In app vimeo player calls moodle/media/player/vimeo/wsplayer.php and it overrides css.

Manually I added to wsplayer.php the style needed to make responsive the iframe and it works. I know that this is not the more elegant solution. Do you think that there is another solution?

Thanks

Willy


On Tuesday, March 20, 2018, 12:26:11 AM CST, Willy Gomez (via Moodle.org) <noreply@moodle.org> wrote:


Moodle in English » Forums » Moodle for mobile » iframe responsive in app doesn't work
Picture of Willy Gomez
Re: iframe responsive in app doesn't work
by Willy Gomez - Tuesday, 20 March 2018, 1:55 PM
 

Gracias Juan.

El problema es que no logro hacer que un video de vimeo se comporte responsive, utilizo iframe incrustrado. Tienes idea de cómo puedo hacer para que el video  incrustrado de vimeo se comporte responsive?


Gracias miles

平均分： -
回复Willy Gomez

Re: iframe responsive in app doesn't work

Juan Leyva -
Core developers的头像 Moodle HQ的头像 Particularly helpful Moodlers的头像 Plugin developers的头像 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.

平均分： -
回复Juan Leyva

Re: iframe responsive in app doesn't work

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

平均分： -
回复Vanessa Skiadelli

Re: iframe responsive in app doesn't work

Juan Leyva -
Core developers的头像 Moodle HQ的头像 Particularly helpful Moodlers的头像 Plugin developers的头像 Testers的头像

Hi Vanessa,

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

Thanks, Juan

平均分： -
回复Juan Leyva

Re: iframe responsive in app doesn't work

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

平均分： -