Responsive Embeds for your Instagram Videos and Photos

Published in: Embed - html5 - Instagram

embed instagram videos

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 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.

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: Embed - html5 - Instagram

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
Amit Agarwal

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. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube