Responsive Embeds for your Instagram Videos and Photos
Last month, I launched the Embed Instagram tool to help you easily embed videos and photographs from Instagram on to your website.
Two weeks later, Instagram included the embed functionality in their website itself making our app more or less redundant. There are however a couple of drawbacks with the default embed code available on the Instagram website.
One, the default embed code is extremely bulky (see waterfall model) as it downloads several JavaScript and font files in the background (around 600 KB). You can reduce the size of your page (and thus increase the page speed) by using the raw embed code that doesn’t download these unnecessary files.
The other problem is that the default embed code isn’t responsive. For instance, if you have embedded a 612x612 Instagram image or video in your blog, it may require horizontal scrolling when the site is viewed on a mobile or tablet.
The code generated by Embed Instagram is however responsive and thus the embedded media would auto-resize based on the size of the visitor’s browser /screen. Please refer to this page to compare both the embed options.
\== Original Story Follows ==
To get started, copy-paste any Instagram URL and the tool will generate the raw embed code for the Instagram media with credits preserved. You may even use short URLs as input line the t.co URLs that you may have discovered on Twitter and the tool will auto-expand them before generating the code.
The default size of Instagram videos and photos is 612x612 pixels but you may alter the height and width values in the embed code to make them fit your blog’s template.
The tool uses the HTML5 video tags for embedding Instagram videos and thus these videos would play on most modern browsers and mobile devices without requiring plugins.
You may also use the embed tool for downloading videos from Instagram. That’s because the embed code includes the direct URL to the .MP4 video file that you may either save locally with a right-click or send it to Dropbox or Google Drive.
Instagram doesn’t allow users to attach any Creative Commons style licenses to uploaded media so it may always be a good idea to get a confirmation from the Instagram user before using their media on your website.
Amit Agarwal
Google Developer Expert, Google Cloud Champion
Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.
Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory