How to embed instagram video?

How to embed instagram video on the webpage and show your creativity.

Copy and page the HTML5 video tag.

First you need to open up page in browser. 

In Chrome right click the video and inspect element to find the code.(see the screen shot below). 

Now find the html code in the inspect element window that contains video tag. 

You can copy entire video tag  and paste into any web pages to embed to video just make sure you clean up unncessary tags on the video tag. Cleaning up is easy remove all attribute except src and poster. See below picture and the code after removing html cleanup. 

		<video  src="http://distilleryvesper7-3.ak.instagram.com/a90181b8daf211e2be2c22000a9f391c_101.mp4" type="video/mp4" poster="http://distilleryimage7.ak.instagram.com/a90181b8daf211e2be2c22000a9f391c_7.jpg" ></video> 

 

 

Another way

Alternately you can just copy the video url and create your own HTML5 video tag. Only HTML5 supporting browser can play the video. Also you can replace with the different poster(thumbail).

Here is the video tag code to add video element using HTML5. 

 

		<video controls="controls" poster="image.jpg" width="640" height="640"><source src="anyvideo.mp4" type="video/mp4"></video> 

Replace the mp4 url on the above code with your own video url (Url you captured in the above procedure). Also replace the poster url to customize the thumbnail of the video. 

After replacing your url should look like this. 

 

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

Here is the tool you can help you automatically generate the html tag. You just need to input the url. 

Embed instavideo tool


Like us

See also

Custom HTML tag

In this article we will talk how we can define own html tags. Also we discuss what are their uses on real web application.