SightMap In-Line Embed

A simple SightMap use case, where the software is embedded in the web page.

by Jacob Pearlstein

HTML

<h2>This is a Page Title</h2>

<div id="iframe-div">
  <iframe width="100%" height="100%" src="https://sightmap.com/embed/e8ywkqrqwlx" frameborder="0" id="sightmap"></iframe>
</div>

CSS

/* maximize html and body tags, 
so that the iFrame will inherit 
as much width height as possible */

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  background-color: #eff8ff;
  margin: 0; /* make this zero so that there's no extra space in this example*/
}

div#iframe-div {
  /* Allow some padding so that the window can be scrolled easily */
  padding-left: 2em; 
  padding-right: 2em;
  
  /* Auto width will adjust the width of the encapsulating div to 100% - 2em.  
  Height is kept at 100% here, but this can be adjusted to other sizes as desired.*/
  width: auto;
  height: 100%;
}

/* If the screen is narrow enough to be a mobile device, set 
the iFrame to a fixed height so that it still looks great. */
@media (max-width:767px) {
  iframe {
    height:450px;
  }
}

/* Center the sample header in the middle of the window. */
h2 {
  text-align: center;
}

JavaScript

// No JavaScript required.