How to Embed Instagram Videos in Blogger

Socialize It →

Tweet

5

Advertisements

Instagram has revolutionized as a mobile application into a robust and interactive Social networking platform where users can not only share their photos, but with their latest inclusion users can now upload and share their videos too. It has become a perfect place of sharing photos and videos with almost millions of users. In the recent past, we have shown you how to Embed Instagram Photos in Blogger. Recently, one of our users asked us How to Embed Instagram Videos in Blogger? Since, it is a new feature, so there are not many ways of doing this job.   In this article, we will Show you How to Embed Instagram Videos in Blogger

This is not a big surprise that Instagram never made any particular thing easy to embed on a third-party website. Their application supports the oEmbed technology, in which services like Embedly can display Instagram photos. But there is no easy embedding option available.

Method #1: Embedded Code Method:

The first thing you need to do is to visit the URL of the video on Instagram that you want to embed on your blogger site. For just an example, we will be using this video.

1. In Google chrome, safari or Firefox, right click on the original video and select “Inspect element”. This is a handy tool which allows you to get access to the source code of a website. You can even make changes to the code like CSS and can witness things changing in front of your eyes. 

2. Find a code similar to this one 'div class-"Video"' and look for a URL that has "distilleryvesper" in the title and ends in ".mp4." Copy the whole line of URL and paste it anywhere you want to display the video. For Example, Blogger >> Add a new Post >> HTML Tab. The code would somewhat looks like this:


<video controls="controls" poster="http://distilleryimage3.s3.amazonaws.com/2ea7416ad9e311e28f2322000a9e0753_7.jpg" width="600" height="640"><source src="http://distilleryvesper3-7.ak.instagram.com/2ea7416ad9e311e28f2322000a9e0753_101.mp4" type="video/mp4"></source>



You just need to get URL and then you can combine things together with embed code to display it onto your blogger site or any other website. 

Method #2: Simple Embed Method:

Probably the easiest way of doing the job is to use a modest technique. Open any video and copy its whole URL. 

For example, http://instagram.com/p/ayxFjtOiCT now just add "/embed" at the end of the URL and it will become http://instagram.com/p/ayxFjtOiCT/embed. 

You can use the iFrame technique to display the video on your webpage. Taking above URL as an example, you can see the working code below:

<iframe frameborder='0' height='292' src='http://instagram.com/p/ayxFjtOiCT/embed?byline=0&amp;portrait=0' width='417px'/>

This technique is pretty much the same as we have shown above, but here you are just utilizing a modest iframe technique to show up the video. Seems like a job well done guys.

Method #3: Use Embedly:

Embedly, provides you the flexibility to embed anything that you like. It also offers an option through which you can embed Instagram videos in your website. This method is for un-techy guys who cannot play around with HTML. 

We won’t prefer this method because the above methods work pretty well. However, if you are unable to achieve anything from above two methods then this one will not to let you down.

What are your thought about this new Instagram video portal? We hope this tutorial helped you to learn how to embed Instagram videos in Blogger. If you liked it then, feel free to share it with your friends on the social web. Let us know what are your thoughts about it.

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).