A Smart and efficient way to embed iframe

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 way to improve the webpage load time is to serve content dynamically. We introduced a feature called on-demand player in our youtube embed code generator. It helped fix the issue of load time by loading  the video player only when user clicks on the thumbnail image. This sort of approach is used by sites such as Google Plus. 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. You can reduce your webpage load time to atleast half the time.


Load iframe responsively and without increasing page load time

The iframe will be presented with an image of your choice with some animations.  In case of missing images, a default image will be presented to the user. When a user clicks on the image,the image will be dynamically replaced with the iframe. Sound’s cool,right? Seeing in in action is even cooler! Check the demo below.

The default iframe code will look like this.

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

The improved iframe code is responsive and efficient a ton times! The code will look like this.

<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=""></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

Shan Eapen Koshy

Shan Eapen Koshy is a web developer, technical blogger and a YouTuber. He has created several web applications and has written many app scripts.