A Smart and efficient way to embed iframe

Load as many iframes as you want but make use of this optimization to prevent slower load times.

When you embed content from other sites such as a youtube video, it increases the page load time since it has to download the required resources. This is a huge issue when considering website performance. One of the simple ways to improve the webpage load time is to load content asynchronously only when required. We introduced a feature called on-demand player in our youtube embed code generator. What if you are trying to embed a webpage using an iframe? It could double (or more) the loading time of your site. To solve this we created an on-demand iframe feature in our HTML5 iframe generator.

It’s one of the best things you can do to reduce your webpage load time – it can vastly reduce the bytes downloaded!

Making iframes responsive and load on click

Initially, an image is shown instead of the ifame and when a user clicks on the image, the image will be dynamically replaced with the iframe. Sound’s cool, right? It is, when considering the number of bytes it saved on initial page load.


The default iframe code will look like this.

<iframe src="Souce_URL" height="400" width="680"></iframe>

Given below is the embed code for the smart iframe which is responsive and efficient a ton times!

<div class="codegena_iframe" data-src="Source_URL" data-img="Image_url" style="height:400px;width:680px;" data-responsive="true"></div>
<!-- Add this script above </body> --> 
<script src="https://codegena.com/assets/js/async-iframe.js"></script>

The script is just over 3 KB!  You can embed as many iframes as required on your webpage by using the html markup given above. Make sure to add the script only once and it should be added after the last iframe (better to add right above </body> tag).

Please note that you should only add small size photos for the dynamic iframe player.

Load iframe on button click

Apart from clicking on the images you can load the dynamic iframe by calling a function. Check the code below.

<!-- Call load_iframe(iframe_number) function to load that particular iframe -->
<button onclick="load_iframe(1)">Load iFrame</button>

With our custom iframe embed, you can add loading icons, borders, and more. To generate the iframe code visit our iframe generator.

  1. wowwww i have basically zero web coding experience and I used this to make a hyper-efficient page to preview twitch clips. Really really appreciate this. Thank you!

Leave a Reply
Related Posts