ifp3.2.php
Responsive Iframe Example with new instant screen change features and Deck exclusion option

In the <head> section of the webpage you want to place this code:


	<style>
	 .ifp-container iframe {
	   position: absolute;
	   top: 0;
	   left: 0;
	   width: 100%;
	   height: 100%;
	 }
	/* Desktops and laptops */
	@media screen and (min-width: 1200px) {
	  .ifp-container {
	  position: relative;
	  height: 0;
	  min-height: 100%;
	  padding-bottom: 76.25%; 
	 }
	}
	/* Landscape tablets and medium desktops */
	@media screen and (min-width: 992px) and (max-width: 1199px) {
	 .ifp-container {
	  position: relative;
	  height: 0;
	  min-height: 100%;
	  padding-bottom: 100%; 
	 }
	}
	/* Portrait tablets and small desktops */
	@media screen and (min-width: 768px) and (max-width: 991px) {
	 .ifp-container {
	  position: relative;
	  height: 0;
	  min-height: 100%;
	  padding-bottom: 150%; 
	 }
	}
	/* Landscape phones and portrait tablets */
	@media screen and (max-width: 767px) {
	 .ifp-container {
	  position: relative;
	  height: 0;
	  min-height: 100%;
	  padding-bottom: 76.25%; 
	 }
	}
	/* Portrait phones and smaller */
	@media screen and (max-width: 480px) {
	 .ifp-container {
	  position: relative;
	  height: 0;
	  min-height: 100%;
	  padding-bottom: 150%; 
	 }
	}
	</style>
			

Now setup your responsive iframe by enclosing it in two DIV tags like this:


	<div style="min-height:100%; margin:0% 3%; width:94%;">
	 <div class="ifp-container">
	  <iframe src=" ** ABSOLUTE PATH TO INTERACTIVE FLOORPLANS **" frameborder="0"></iframe>
	 </div>
	</div>
	

That's it, you now have a responsive iframe!