Support Center
Find the answer to your question by using our indepth knowledge base

Help with iFrames

Last Updated: May 24, 2016 01:54PM CDT
One of the best ways for LMS administrators to embed Gemba Academy content into their LMS systems is by using iframes.  This article shares some best practices for using iframes with our content.

Specified Width / Height

The following example specifies the width and height of the video element.  The videos are in a 16:9 aspect ratio, therefore the width and height of the iframe should follow.  There is an online aspect ratio calculator for getting your dimensions perfect!  http://calculateaspectratio.com
The "allowfullscreen" parameter is also require so the video can break the iframe to go fullscreen.

Code

<iframe src="https://www.gembaacademy.com/help/test_video_files/intro-01.html" allowfullscreen width="720px" height="405px">

Demo


Responsive

The videos are full responsive in order to best playback on any device, desktop, tablet of mobile. To go responsive you will want to wrap your iframe into a div.  Please note the use of inline styles.  This is simply because most LMS systems don't give admins CSS access in order to make these updates.  If your LMS allows the use of external CSS, that is highly recommended.

Code

<div style="position: relative;height:0;overflow:hidden;padding-bottom:56.25%;">
    <iframe style="top:0;left:0;width:100%;height:100%;" allowfullscreen src="https://www.gembaacademy.com/help/test_video_files/intro-01.html">
</div>

Demo

http://assets3.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete