Moodle for mobile

iframe responsive in app doesn't work

 
Picture of Vanessa Skiadelli
Re: iframe responsive in app doesn't work
 

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

 
Average of ratings: -