Responsive/fluid iframe
How do I make an responsive/fluid iframe?
What is a responsive/fluid iframe? How do you make a responsive/fluid iframe? This script and codes were developed by Gabriel on 18 July 2022, Monday.
Responsive/fluid iframe - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>responsive/fluid iframe</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .super-iframe-holder { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;
}
.super-iframe-holder iframe,
.super-iframe-holder object,
.super-iframe-holder embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; margin: 0; bottom: 0; outline: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="super-iframe-holder"> <iframe src="https://www.google.com/maps/d/embed?mid=zAFwxutuibHA.kpIdskLIwieo" width="640" height="480"></iframe>
</div>
<br />
<hr />
<br />
<div class="super-iframe-holder"> <iframe width="560" height="315" src="https://www.youtube.com/embed/CkGVMWK10qU" frameborder="0" allowfullscreen></iframe>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Responsive/fluid iframe - Script Codes CSS Codes
.super-iframe-holder { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;
}
.super-iframe-holder iframe,
.super-iframe-holder object,
.super-iframe-holder embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; margin: 0; bottom: 0; outline: 0;
}
Developer | Gabriel |
Username | gab |
Uploaded | July 18, 2022 |
Rating | 3 |
Size | 1,966 Kb |
Views | 38,456 |
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!
Name | Size |
Projects page | 4,147 Kb |
A clicking cookie gaaaame... | 16,067 Kb |
Picture overlay | 2,450 Kb |
Inline editing with jquery | 2,576 Kb |
A Pen by Gabriel | 2,459 Kb |
Font awesome Hamburger-Menu-Toggle | 2,191 Kb |
Gmaps.js with refresh location button | 2,293 Kb |
Css3 background-clip | 2,090 Kb |
LocalStorage Test | 2,927 Kb |
Chrome notifications test | 3,589 Kb |
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!
Name | Username | Size |
A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Simple personal profile | Miroot | 2,856 Kb |
Alumni ECA | MatheusLima92 | 3,777 Kb |
RWD- Mostly Fluid Layout Pattern | Marcocastro | 2,312 Kb |
Learning canvas drawing | Aurer | 2,204 Kb |
VerbalExpressions Converter | Cmalven | 2,607 Kb |
Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
React Recipe Box | Krokodill | 5,347 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!