Auto-scaling iframes

Developer
Tom Lutzenberger
Size
3,057 Kb
Views
32,384
  1. Auto-scaling iframes Previews
  2. Auto-scaling iframes HTML Codes
  3. Auto-scaling iframes JS Codes

How do I make an auto-scaling iframes?

What is a auto-scaling iframes? How do you make a auto-scaling iframes? This script and codes were developed by Tom Lutzenberger on 24 August 2022, Wednesday.

Auto-scaling iframes Previews
IQ Test

Auto-scaling iframes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Auto-scaling iframes</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<div class="container"> <div class="row"> <div class="col-sm-12 text-center"> <h1>Auto-scaling iframes</h1> <p>The nature of iframes is to be static and unflexible.<br/><strong>Let's make them responsive!</strong> </p> </div> </div>
</div>
<div class="container"> <div class="row"> <div class="col-sm-4"> <h2>33% iframe</h2> <iframe width="800" height="600" frameborder="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3168.6392906210613!2d-122.08624618424679!3d37.42199987982524!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fba02425dad8f%3A0x6c296c66619367e0!2sGoogleplex!5e0!3m2!1sde!2sch!4v1479590858003"></iframe> </div> <div class="col-sm-8"> <h2>66% iframe</h2> <iframe width="800" height="600" frameborder="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3168.6392906210613!2d-122.08624618424679!3d37.42199987982524!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fba02425dad8f%3A0x6c296c66619367e0!2sGoogleplex!5e0!3m2!1sde!2sch!4v1479590858003"></iframe> </div> </div> <div class="row"> <div class="col-sm-6"> <h2>50% iframe</h2> <iframe width="800" height="600" frameborder="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3168.6392906210613!2d-122.08624618424679!3d37.42199987982524!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fba02425dad8f%3A0x6c296c66619367e0!2sGoogleplex!5e0!3m2!1sde!2sch!4v1479590858003"></iframe> </div> <div class="col-sm-6"> <h2>50% iframe (16:9)</h2> <iframe width="800" height="450" frameborder="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3168.6392906210613!2d-122.08624618424679!3d37.42199987982524!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fba02425dad8f%3A0x6c296c66619367e0!2sGoogleplex!5e0!3m2!1sde!2sch!4v1479590858003"></iframe> </div> </div>
</div>
<div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <h2>100% iframe (4:1; full-with)</h2> <iframe width="800" height="200" frameborder="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3168.6392906210613!2d-122.08624618424679!3d37.42199987982524!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fba02425dad8f%3A0x6c296c66619367e0!2sGoogleplex!5e0!3m2!1sde!2sch!4v1479590858003"></iframe> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Auto-scaling iframes - Script Codes JS Codes

// Auto-scaling iframes
//-----------------------
// VanillaJS version
function iframeAutoScale() { 'use strict'; var iframes = document.getElementsByTagName('iframe'), index = 0; if (iframes.length > 0) { for (index = 0; index < iframes.length; index++) { var iframe = iframes[index], parent = iframe.parentElement, parentPadding = parseInt(window.getComputedStyle(parent, null).getPropertyValue('padding-left')) + parseInt(window.getComputedStyle(parent, null).getPropertyValue('padding-right')), parentWidth = parent.clientWidth - parentPadding, ratio = 0.75,	// default ratio (4:3) width = iframe.clientWidth, height = iframe.clientHeight; // overwrite default ratio if width and height attributes are not set if (width !== undefined && height !== undefined) { ratio = height / width; } iframe.setAttribute('width', parentWidth); iframe.setAttribute('height', parentWidth * ratio); } }
}
// onload
document.addEventListener('DOMContentLoaded', function () { iframeAutoScale();
}, false);
// on window resize
window.onresize = function(event) { iframeAutoScale();
};
// jQuery Version
/*
function iframeAutoScale() { 'use strict'; $('iframe').each(function () { var parentWidth = $(this).parent().innerWidth(), ratio = 0.75,	// default ratio (4:3) width = $(this).attr('width'), height = $(this).attr('height'); // overwrite default ratio if width and height attributes are not set if (width !== undefined && height !== undefined) { ratio = height / width; } $(this).attr('width', parentWidth); $(this).attr('height', parentWidth * ratio); });
}
// onload
$(document).ready(function () { iframeAutoScale();
});
// on window resize
$(window).resize(function () { iframeAutoScale();
});
*/
Auto-scaling iframes - Script Codes
Auto-scaling iframes - Script Codes
Home Page Home
Developer Tom Lutzenberger
Username tomlutzenberger
Uploaded August 24, 2022
Rating 4
Size 3,057 Kb
Views 32,384
Do you need developer help for Auto-scaling iframes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tom Lutzenberger (tomlutzenberger) Script Codes
Name
Square-Box Vertical Center
Hxgn
Weather widget
A Pen by Tom Lutzenberger
Square-Box Vertical Center - Method 2
Palindrome check
Standard Template
Pseudo ASCII-Art
CSS Folders
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!