So I just upgraded to 3.7.
And I noticed in mobile that images and Youtube embeds aren't responsive.
I tried some different things, like putting this in additional html:
- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> but that didn't do anything. Is there a better place to put it?
- img { width: 100%; height: auto; max-width: auto;}
The later works with some images but doesn't work with the profile pic as it makes that bigger when it shouldn't be. And I only tested it on a few pages.
Is there a way to have that not affect the profile pic?
I know I can create a class for youtube embeds as I have it on the home page, but I am wondering if there is something a little more simple?
On my home page I wrap the video in a div... <div class="video-container">youtube embed goes here</div> and then put this css in my classic theme:
.video-container { position:relative; padding-bottom: 56.25%; padding-top: 30px; margin-bottom:7px; height:0; overflow:hidden; }
And it works, but my courses have hundreds of videos and I am wondering if there is a site wide way to make them more mobile friendly.
I thought of using the search and replace:
Search:
<iframe
Replace with:
<div class="video-container"><iframe
And...
Search:
</iframe>
Replace with:
</iframe></div>
And i think that might work and I could test it on one, but not sure that is best.
in 2.7 On my home page I had this fast loading Youtube embed script from Labnol but it doesn't work in 3.7.
IDK why.
Anyways that is what I know.
Anybody have some tips on making images and Youtube embeds responsive in Moodle 3.7?