AnsweredAssumed Answered

How to embed an AGOL app on a website so the iframe fills the whole viewport?

Question asked by deleted-user-zc_J5JescS67 on Jun 4, 2017

Hi. I'm embedding an AGOL app on a website, viewable here. I'd like to format the map so it fills the entire viewport, so it is not necessary to scroll down to the bottom of the page. HTML 5 does not support iframe declarations, and in the code you can see my attempts at altering the iframe through .css and .js.


I'm sure this is a very basic issue- any advice appreciated, thanks!



<!DOCTYPE html>
    <meta charset="UTF-8">
    <meta name="embed-container" content="width=device-width, initial-scale=1">
    <title>Portland Cycle Safety Map</title>
    <link rel="icon" href="/icons/cog.svg">
    <script type="application/javascript">


function resizeIFrameToFitContent( iFrame ) {


    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;


window.addEventListener('DOMContentLoaded', function(e) {
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
} );


    <style type="text/css">
        html, body { margin: 0; padding: 0; height: 100%; }
        iframe {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
   .embed-container {position: relative;
        padding-bottom: 80%;
        height: 0;
        max-width: 100%;}
   .embed-container iframe, .embed-container object {position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;}
    small{position: absolute;
      z-index: 40;
      bottom: 0;
      margin-bottom: -15px;}          
   <div class="embed-container">
   <iframe scrolling="no" width="100%" height="100%" margin-top="100px" title="Cyclist Danger Zones"