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.

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

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.

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

  • Thanks for this information

  • aldompe

    how i add the loader gif?

  • Alberto Oliver

    What about playlists? Thanks!

  • Nick Bedo

    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!

  • Anh

    Thank you for this. How can you use the allowfullscreen like with normal iframe if you use div here?