Use an iframe¶
You can use an iframe to display a tour within a web page, though in most cases it's just as easy to embed the tour directly into a web page. However, if the software you are using to maintain your website does not allow direct embedding (some website tools won't allow you to insert <script> tags), then using an iframe might be your only option.
Tours that use large popups generally don't work well in an iframe because the popups cannot display outside of the iframe like they can when a tour is embedded directly in a web page.
Responsive iframe¶
An important consideration when using an iframe for a Classic tour on a responsive web page is that the iframe itself must be responsive so that when the page resizes, the iframe maintains the tour's aspect ratio. Fortunately, this is easily accomplished with a little bit of CSS that is shown following the example below.
As you make the browser window narrower or wider, the iframe resizes in a way that maintains the tour's aspect ratio. Aspect ratio is the proportional relationship between width and height.
The CSS and HTML for the responsive iframe above is shown below. The trick to making the iframe responsive is adding a percentage value for padding-top to maintain the aspect ratio of the container iframe-container <div>. In this example, the tour has a width of 1200px and height of 540px (these values come from the Advanced Tour Layout screen). Those dimensions make the tour's aspect ratio equal to 540/1200 which equals 0.45, or 45%.
.iframe-container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 45.0%;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
<div class="iframe-container">
<iframe class="responsive-iframe" src="https://mapsalive.com/samples/83693?stacked-layout=0" frameBorder="0" scrolling="no"></iframe>
</div>
The Flex Map below is embedded in this user guide page with a non-responsive iframe. It runs in mobile mode so that it uses slideouts instead of popups. Click on one of the bridge markers to see its content appear in a slideout.
As you make the browser window narrower or wider, the iframe width changes, but the height stays fixed at 400px. As such, the aspect ratio of the iframe constantly changes as it resizes and the Flex Map automatically resizes to fit the iframe.
The single line of HTML used to embed the tour is shown below. Note use of the mobile-mode tour setting on the query string. Setting the option to always causes the tour to run in mobile mode which use slideouts instead of popups. This is a good option in this case because this tour normally uses popups, but popups often don't work well within an iframe because they cannot display outside of the iframe, and thus they can become too small to be useful. Slideouts work better than popups when there is limited screen space.
<iframe src="https://tour.mapsalive.com/83670?mobile-mode=always" width="100%" height="400px" frameBorder="0" scrolling="no"></iframe>