CODEWITHSUNDEEP
javascripthtmlcssiframescorm
Antonio Suteu
Antonio Suteu

Reputation: 21

SCORM doesn't seem to be responsive on mobile viewport when put into a iframe

We got a SCORM from a client and we have to display it on our website.

When opening the scorm by itself on a browser (meaning starting from the index.html file) everything seems normal (fully responsive).

Whereas when opening it using our website (putting the content in an iframe) the contents of the SCORM package seem to stop being responsive (font size too small)

You can see the problem here

Some code

 <div class="row-container" data-bind="with: pillola">
        <div class="first-row">
            <!--go back button-->
            <p class="ml-3 mt-3" id="go_back"><a href="Index.html">&lt; Back</a></p>
        </div>
        <div class="second-row">
            <iframe id="pill_video" data-bind="attr: {src: '../Content/Pills/' + encodeURIComponent(FolderName) + '/scormcontent/index.html' }" src="../Content/Pills/XiaomiTest/scormcontent/index.html"> </iframe>
        </div>
    </div>

CSS for the page

/*iframe height fix*/
body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0
}

.first-row {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
}

.second-row {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
}

    .second-row iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
    }

Note: I've also tried making the iframe fit the parent div's full size by using other methods (basically every method in the accepted answer, all of which give me the same issue with the font size)

Upvotes: 0

Views: 286

Answers (1)

d33p
d33p

Reputation: 11

Top page needs to be responsive too.

Set the viewport meta on the top page:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Upvotes: 1

Related Questions