Mobile app and iframes

Re: Mobile app and iframes

by Daniell Goodin -
Number of replies: 3

Not sure if this should go into bugs and improvements?

Mod's can steer me in the right direction. 

This screenshot actually shows what is happening well. 

Logging to the forums on the Mobile app (Android). Within the preview thread mode, I can actually see these iframes working as if I had put them in as HTML. We can see the container size they are being limited to. (but there again should they be actually showing as I had thought that iframes where turned off for the Moodle forums as I have tried to include a few before within the HTML edits and not have them show. )


going to full screen within the app.. 


Interesting enough if I go into the thread I just see the post code.. 



And chances are there is a bit of discussion on this editing ribbon being a bit overpowering. As it then only allows for one line edits within the forum once the keyboard kicks up. I see an option to turn it off?

Haven't had a look at the new H5P hosting site yet, but will do and play around over coming weeks with it and see how it fits into the Moodle app offering. 

All good, happy to join up with the Beta testing team if they want a tester as I am trying to develop the site for Mobile app first then Desktop/Mobile browser. As said in the previous post this may have to be put on hold until this all settles down. 



Average of ratings: -
In reply to Daniell Goodin

Re: Mobile app and iframes

by Daniell Goodin -

A little play around today and looking at some codes that are working. 

Seeing that standard Moodle Atto Youtube insert looks fine and as we know that it is using an iframe that is being handled by the internal Atto Moodle coding. (but we can't see that code when we go to HTML edits). I also had a look at some of our Vimeo videos and they are looking fine via the mobile app. 

so I have pulled some of the Vimeo code apart and used it with the GDrive codes. 

This is what I get and it looks fine.. the padding can be played with to suit the PPT's in question. 


<div style="padding:70.00% 0 0 0;position:relative;"><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQ4fIJnrWjggro4UIz5Xokk5wMDfwP-gsommd8DOs1g24jjBjae2auZaAcgb2hxOdEPQSeXUIARRSSQ/embed?start=false&amp;loop=false&amp;delayms=3000" frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:100%;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></div>

<div style="padding:70.00% 0 0 0;position:relative;"><iframe src="https://drive.google.com/file/d/1frtLH1cQkDBmclD4h_6UUpgfzM_5qL8u/preview" style="position:absolute;top:0;left:0;width:100%;height:100%;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></div>

Using the format (and dropping in a src="https - As with in the desktop it works with out this but as per last posts mobile doesnt see it).. I am getting Slides.com working fine too.. will need a little tweeking but they are fine for now. 

<div style="padding:70.00% 0 0 0;position:relative;"><iframe src="https://slides.com/advancedconstructionskills/70-20-10/embed?byline=hidden&amp;share=hidden" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></div>


Flowpaper also is looking better but the format needs to be played with as the iframe is only going mobile and it would be nice to trick it to use the desktop format..

<div style="padding:70.00% 0 0 0;position:relative;"><iframe frameborder="0" width="400" height="300" title="" src="https://online.flowpaper.com/74cc0732/702010/#page=6" type="text/html" style="position:absolute;top:0;left:0;width:100%;height:100%;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></div>

Of note these do look full page on the desktop, but are responsive so is acceptable. 

I haven't had time to play with any H5P iframes out of WordPress to a Moodle site at the moment but I am guessing that this little fix will work. 

Hope this reporting back helps out any others that use any of these services. 

I am guessing that now that I have worked this out there might be a chance that using a GENERICO template might also achieve this and shorten the coding timeframes for activities creation. 


If anyone wants to have a play this code I have posted should work just by dropping it into your ATTO editor and see these in action then head to your mobile app to see how they look. 

The Actual PPT is a remake from the folks over at E-Learning Heroes - Articulate

https://community.articulate.com/download/powerpoint-70-20-10/

Average of ratings: -
In reply to Daniell Goodin

Re: Mobile app and iframes

by Daniell Goodin -

Wondering if someone smarter then me can help me out and point me in the right direction. 


Following on from the conversation I am having with myself on the above. 

( I can't be the only moodle course designer for mobile app users that is facing this problem..can I?)


So far I am feely happy with the codes I have found that work to give me the look and sizing of the materials we are creating. 

But I would still love to crack out the "why & how" of the standard Moodle video placement codes in that, I want to play around with them on the H5P content. At the moment it is a bit of a deal breaker for me and why I am not leaning towards more H5P content creation but more of the google drive type. 


I have tried using the Chrome inspector to find any tidbits that may be of use, but my knowledge level is not great enough to see anything of use. 


To put it into pictures.. 

Portrait - Bad, 

seems at the moment I am not able to create a bigger container that is viewed within the android app then what is showing here. 


Portrait - Good

Using Atto internal Moodle codes. 



landscape - Standard codes

Same as above with container not being allowed to expand.

 

landscape - Moodle codes - Good (but while centred on the page in desktop not centring within the Mobile app)



Code from inspector I am looking at. 



At this stage, as mentioned nothing is popping out at me, but high chance as it is the lack my CSS and or HTML experience. 

Anyone got an idea and or have samples of better workings. 

Noting that this is for H5P content as for video and PPT's the codes in the previous posts are working a treat.


I will post to the H5P threads as well and report back any findings over coming weeks. 

Once this is settled then we have the holy grail for course designers. smile


I would still like to put forward the ability to have that bottom\top menu bar disappearing on content. i.e a sliding draw effect. Yes

As between the top one and bottom one, there is too much screen real-estate being lost. 


Is this something that can be voted on and or put out to the community to work on.. i.e a go fund page.?

I would be happy to put a few $$$ towards it, as while I know there are custom apps being made that may have this ability already. 

It would be nice to have it out there for the smaller creators to use for their students.. 


Also of note, I do understand the work here thus the idea of a funded page for someone to benefit from. 
Average of ratings: -