How to Embed Your Instagram Video

Now that Facebook has unveiled video on Instagram, creating videos is an easy process. It makes good on Instagram's intention: bring simplicity to the video experience.

It's hard not to see Instagram video as a response to Vine, Twitter's uber-successful video sharing tool. And although Instagram's video feature improves upon Vine, it's also lacking a core part of the Vine experience.

Namely, the ability to embed your videos elsewhere.

This isn't a huge surprise. Instagram never made it particularly easy to embed or syndicate photos. The app supports the oEmbed standard, which means that services such as Embedly and web apps such as WordPress can display Instagram photos inline or in other apps. But there is no easy "embed" button for end-users.

That's frustrating if you want to share an Instagram video moment with others on the web. But I'm not one to give up on a challenge, and decided to investigate whether it was possible to embed an Instagram video file as HTML5 on another website.

The short answer: yes Virginia, you can embed Instagram videos on your site.

The longer answer: the process is far from straightforward. I fully expect someone to come up with an automated solution. In the meantime, here's how to create Instagram video embeds manually.

A Few Notes of Warning

Even though Instagram supports the oEmbed endpoint, it's not clear how copyright for Instagram images — even if they are pure embeds (hosted on Instagram's servers) — really work. To be safe, only embed videos from your own account, or from users who've given you permission to embed.

Also be aware that if Instagram were to change its URLs for the hosted videos or images, this method may stop working. With any luck, Facebook and Instagram will either offer up official embed support or update the oEmbed endpoint to support video playback.

This process also requires a web browser capable of displaying HTML5 video encoded in H.264. If you're using Chrome, Safari or Internet Explorer, you should be fine. Firefox 21 and up supports H.264 on Windows 7 and on Android.

Getting Started

The first thing you need to do is visit the URL for the video on Instagram you want to embed. In my example, I'm going to use use this Videogram of my desk.

1. In Chrome or Safari, right-click on the video and select "Inspect Element."

   

2. Find the area of code that says 'div class-"Video"' and look for a URL that has "distilleryvesper" in the title and ends in ".mp4."

   

   This is the URL for your video clip. Copying that URL (right click on the code section and select "copy link address") and pasting it into its own webpage should give you a link like this.

3. Now, look for the URL of the "poster" image. This is the Cover Photo you chose for your Instagram video. It is an AmazonAWS link; the URL should start with "distilleryimage." In my case, the poster image URL goes here. Copy this URL and open it in a new tab or window.

4. Now we need to generate our HTML5 video code. The easiest way to do that is to use the Video for Everybody generator.

5. Fill out the generator, putting the video file in the MP4 video field, the Cover Photo URL in the poster image field and adding in a title for your embed.

   

   The dimensions of the Instagram video are 640x640. You can choose to enable or disable autoplay (I find autoplay annoying; I recommend disabling it) and you can choose how you want the file to embed. Make it easy and just go for HTML5. If you want to offer a way for the video to playback in Flash too, select HTML5 and Flash as your option.

6. Copy the string of code at the bottom of the generator. If you want, you can omit the "download this video" section.

The final code snippet will look something like this. You can also alternatively replace your own Instagram links in that code.

This is the final result:

Now put the code on your personal website or Tumblr. With Tumblr, the HTML5 code will only work in a text post — not in the video embed code. If you want, you can download the MP4 file and upload it directly to Tumblr.

Option 2: Use Embedly

Embedly, an awesome service we've mentioned before, managed to add Instagram video playback support just hours after the product's release. That means that if your website includes the Embedly library (or you have the WordPress plugin installed), all you need is the URL. Videos will play back perfectly.

Interested in embedding Instagram videos on your website? Let us know in the comments.

Thumbnail courtesy of Instagram. Screenshots by Christina Warren, Mashable