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.
Thanks for this information
You’re welcome!
how i add the loader gif?
What about playlists? Thanks!
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!
Hello,
Thank you for this. How can you use the allowfullscreen like with normal iframe if you use div here?
Are you happy for me to copy the js script and use it in production?
Yes indeed! You are free to modify the code as well but please make sure to serve the file from your server and not hotlink us.
I have one problem, the script is amazing but i can’t do fullscreen with them. Do you know how to solve it?