Making iframes responsive is one of the hardest parts of makeing a responsive website. This is commonly done by using a CSS hack. The only problem is that you can't use the same class for every <iframe>. You have to have different classes for each aspect ratio. Perfect Iframe solves this problem. All you have to to is put the width and height attributes with the appropriate values and Perfect Iframe will do the rest!
- One size fits all solution for making iframes responsive.
- Add custom styles simply by putting
data-style="(your custom CSS)"in the iframe's attributes.
In order for Perfect Iframe to work, you need to have jQuery loaded in the page. If you do not already have jQuery in your project, you can include it by downloading it from jquery.com/download or by using the CDN and linking it in your HTML file (see example).
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="(PATH TO FILE)/jquery-3.5.1.min.js"></script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
</body>
</html>To load Perfect Iframe download Perfect Iframe, unzip the folder, and insert <script src="(PATH TO FOLDER)/perfect-iframe/perfectiframe.js"></script> int the header tags of your code (see example). Make sure the Perfect iframe tag is placed after the jQuery tag.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="(PATH TO FOLDER)/perfect-iframe-main/perfectiframe.js"></script>
</head>
<body>
[your code]...
</body>
</html>Here is a simple example using Perfect Iframe for a YouTube video:
<!DOCTYPE html>
<html>
<head>
<title>Perfect Iframe Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="(PATH TO FOLDER)/perfect-iframe-main/perfectiframe.js"></script>
</head>
<body>
<iframe width="900" height="506" src="https://www.youtube.com/embed/ScMzIvxBSi4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
Here is a another simple example using Perfect Iframe for a regular website <iframe>:
<!DOCTYPE html>
<html>
<head>
<title>Perfect Iframe Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="(PATH TO FOLDER)/perfect-iframe-main/perfectiframe.js"></script>
</head>
<body>
<iframe width="900" height="506" src="(WEBSITE URL)"></iframe>
</body>
</html>
For more detailed instructions on how to use Perfect Iframe, visit the GUIDES page.
This software is distributed under the Apache 2.0 license. For more information, read the LICENSE file.
Currently, Perfect Iframe is a privately maintained project. If you find any bugs or have any suggestions, please submit them to the issue tracker.
If you find any bugs, please report them to the issue tracker. If you find a major security vulnerability, please DO NOT use the issue tracker to report them. See the SECURITY file for more information.