Home Web Development JavaScript JavaScript Instagram Media Downloader | Save Insta Photos & Videos

JavaScript Instagram Media Downloader | Save Insta Photos & Videos

October 25, 2019

14521

How can we download Instagram videos and photos using the HTML CSS JavaScript program? Solution: See this JavaScript Instagram Media Downloader. In other words, Program For Save Instagram Photos & Videos.

Previous I have shared JS Random Password Generator for social media, but this is for download Instagram’s media. Basically, Instagram is the largest media sharing social platform in the world. And our idols and favorite celebrities are on this network. Sometimes we like any photos or videos and want to save it offline but, we can’t save or download Instagram media directly. Then we have to go a third-party website for download media, but we can create a program for that work.

Today you will learn to create a program for Save Insta Photos & Videos. Basically there is a text input field, a button, and a dummy image. When you will put a valid Instagram photo or video linked to the input field and click on the button then the image will visible by replacing the dummy image. After the image appearance, you click save it by right click on the mouse.

So, Today I am sharing JavaScript Instagram Media Downloader. This program is completely based on JavaScript, no other libraries used in there. The program getting the image or video and shows on the page and you can save it locally. Peoples search for Instagram downloader, you can take this script and use it your website to getting visitors.

If you are thinking now how this Instagram downloader actually is, then see the preview given below.

Preview Of Save Insta Photos & Videos Program

See this video preview to getting an idea of how this save photos and videos program looks like.

Live Demo

Now you can see this visually, you can also see it live by pressing the button given above. If you like this, then get the source code of its.

JavaScript Instagram Media Downloader Source Code

Before sharing source code, let’s talk about it. First I have created a header and a section using HTML. The header for placing the blank input and the button and the section for showing the image and massage. Also in the HTML file, I have linked the other files like JavaScript and CSS. HTML has very little part in this program, it just creating the layout and frame of the program.

Now using CSS, I have placed all the elements in the right place, as you can see in the preview. I just styled the header section and input fields, also I placed a dummy image in the image section by default. This a responsive design, for creating that I have used CSS @media query and resize the elements according to small screen size.

JavaScript doing here the main work of the program, the whole program is based on JS. There I have used JavaScript const statement in the whole program (info). There I have created 3 sections of codes, first for getting video, second for getting the image, and third for the printing media like photos and videos. In the JS file, I left comments on every section for easy understanding.

Left all other things you will learn after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files for that. First for HTML, second for CSS, and the third one for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Instagram Downloader | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <header class="navbar">
      <input type="text" value="" placeholder="Paste link here...">
      <button class="search" onclick="getMedia()">Get</button>
    </header>
    <section class="result">
      <div class="image-placeholder"></div>
      <p> Copy image or video link from Instagram and put it on the field given on the top. </p>
    </section>
  </main>
  
  <script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Instagram Downloader | Webdevtrick.com</title>

</head>

<body>

<main>

</header>

<p> Copy image or video link from Instagram and put it on the field given on the top. </p>

</section>

</main>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
* {
  box-sizing: border-box;
}
html, body {
  position: relative;
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  font-family: "consolas",monospace;
  font-size: 14px;
  line-height: 1.5;
  background: #f9f9f9;
  color: #333;
}
code {
  background: #208bfd;
  color: #f9f9f9;
  padding: 0.1em 0.5em;
  border-radius: 4px;
}
.image-placeholder {
  margin: auto;
  width: 89%;
  max-width: 500px;
  display: block;
  height: 380px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url(https://webdevtrick.com/wp-content/uploads/image-placeholder.png);
}
@media (max-width: 420px) {
  .image-placeholder {
    width: 320px;
    max-width: 320px;
    height: 280px;
    background-size: contain;
    background-position: top left;
    background-attachment: scroll;
  }
}
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4em;
  background: #208bfd;
  margin: 0 auto;
  text-align: center;
  color: #f9f9f9;
}
::placeholder {
  color: #212121;
}
input {
  display: inline-block;
  width: 100%;
  max-width: 50%;
  max-width: calc(100% - 8em);
  min-height: 2.8em;
  padding: 0.5em;
  margin: 0.5em 0;
  background: #f3f3f3;
  border-color: #208bfd;
  border-width: 1px;
  color: #212121;
  transition: all 500ms ease;
}
input:focus, input:hover {
  border-color: #208bfd;
  transition: all 500ms ease;
}

@media (min-width: 420px) {
  input {
    max-width: 50%;
  }
}
.search {
  display: inline-block;
  padding: 0 1em;
  text-align: center;
  min-width: 2.8em;
  height: 2.8em;
  margin: 0;
  background: #208bfd;
  border: 2px solid #212121;
  color: #f9f9f9;
  transition: all 500ms ease;
}
.search:focus, .search:hover {
  background: #212121;
  border-color: #f9f9f9;
  cursor: pointer;
  transition: all 500ms ease;
}
.result {
  margin: 0 auto;
  padding: 4em 1em;
  max-width: 40em;
}
.result video, .result img {
  width: calc(100% - 4em);
  margin: 2em;
}
.result .download {
  text-decoration: none;
  display: inline-block;
  padding: 0.5em 1em;
  background: #208bfd;
  border-color: #208bfd;
  border-width: 1px;
  color: #f9f9f9;
  transition: all 500ms ease;
}
.result .download:focus, .result .download:hover {
  background: #208bfd;
  border-color: #f9f9f9;
  cursor: pointer;
  transition: all 500ms ease;
}
@media (max-width: 600px) {
  .result {
    position: absolute;
    top: 4em;
    left: 0;
    right: 0;
    height: calc(100% - 10em);
    overflow-y: auto;
    max-width: 40em;
    background: #f9f9f9;
    margin: auto;
  }
}
footer {
  width: 100%;
  margin: 2em auto;
  text-align: center;
}

@media (max-width: 600px) {
  footer {
    position: absolute;
    bottom: 1em;
    left: 0;
    right: 0;
    height: 2em;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

/* Code By Webdevtrick ( https://webdevtrick.com ) */

* {

box-sizing: border-box;

}

html, body {

position: relative;

height: 100%;

}

body {

margin: 0;

padding: 0;

font-family: "consolas",monospace;

font-size: 14px;

line-height: 1.5;

background: #f9f9f9;

color: #333;

}

code {

background: #208bfd;

color: #f9f9f9;

padding: 0.1em 0.5em;

border-radius: 4px;

}

.image-placeholder {

margin: auto;

width: 89%;

max-width: 500px;

display: block;

height: 380px;

background-repeat: no-repeat;

background-size: cover;

background-position: center center;

background-image: url(https://webdevtrick.com/wp-content/uploads/image-placeholder.png);

}

@media (max-width: 420px) {

.image-placeholder {

width: 320px;

max-width: 320px;

height: 280px;

background-size: contain;

background-position: top left;

background-attachment: scroll;

}

header {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 4em;

background: #208bfd;

margin: 0 auto;

text-align: center;

color: #f9f9f9;

}

::placeholder {

color: #212121;

}

input {

display: inline-block;

width: 100%;

max-width: 50%;

max-width: calc(100% - 8em);

min-height: 2.8em;

padding: 0.5em;

margin: 0.5em 0;

background: #f3f3f3;

border-color: #208bfd;

border-width: 1px;

color: #212121;

transition: all 500ms ease;

}

input:focus, input:hover {

border-color: #208bfd;

transition: all 500ms ease;

}

@media (min-width: 420px) {

input {

max-width: 50%;

}

.search {

display: inline-block;

padding: 0 1em;

text-align: center;

min-width: 2.8em;

height: 2.8em;

margin: 0;

background: #208bfd;

border: 2px solid #212121;

color: #f9f9f9;

transition: all 500ms ease;

}

.search:focus, .search:hover {

background: #212121;

border-color: #f9f9f9;

cursor: pointer;

transition: all 500ms ease;

}

.result {

margin: 0 auto;

padding: 4em 1em;

max-width: 40em;

}

.result video, .result img {

width: calc(100% - 4em);

margin: 2em;

}

.result .download {

text-decoration: none;

display: inline-block;

padding: 0.5em 1em;

background: #208bfd;

border-color: #208bfd;

border-width: 1px;

color: #f9f9f9;

transition: all 500ms ease;

}

.result .download:focus, .result .download:hover {

background: #208bfd;

border-color: #f9f9f9;

cursor: pointer;

transition: all 500ms ease;

}

@media (max-width: 600px) {

.result {

position: absolute;

top: 4em;

left: 0;

right: 0;

height: calc(100% - 10em);

overflow-y: auto;

max-width: 40em;

background: #f9f9f9;

margin: auto;

}

footer {

width: 100%;

margin: 2em auto;

text-align: center;

}

@media (max-width: 600px) {

footer {

position: absolute;

bottom: 1em;

left: 0;

right: 0;

height: 2em;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
const _ = e => document.querySelector(e);
const render = _('.result');


// create video
const createVideo = data => {
  let v = document.createElement('video');
  v.id = "instavideo";
  v.src = data.content; 
  v.controls = true;
  v.autoplay = true;

  // create info
  let info = document.createElement('p');
  info.textContent = "Click the right button on video and select save as.";

  render.innerHTML = ""; 
  render.appendChild(v);
  render.appendChild(info);
};
// create image
const createImg = data => {
  // create image
  let i = document.createElement('img');
  i.id = "instaImg";
  i.src = data.content;

  // create info
  let info = document.createElement('p');
  info.textContent = "Click the right button on the image and select save image..";

  render.innerHTML = ""; 
  render.appendChild(i); 	
  render.appendChild(info); 

};

// extract html
const getMedia = () => {
  render.innerHTML = "<div class='image-placeholder'></div>";
  // get input value
  let url = _('input').value;
  if (url) {
    fetch(url).
    then(r => r.text()).
    then(r => {
      // render html
      render.innerHTML = r;
      // wait, find meta and create video or image
      let w = setTimeout(() => {
        let v = _('meta[property="og:video"]');
        if (v) {
          createVideo(v);
        } else {
          let img = _('meta[property="og:image"]');
          if (img) {
            createImg(img);
          } else {
            document.body.innerHTML = body;
            alert('Error extracting Instagram image / video.');
          };
        }
        clearTimeout(w);
      }, 200);
    });
  } else {
    _('input').setAttribute('placeholder', 'Invalid address, use a proper Insagram link');

  }
};

// Code By Webdevtrick ( https://webdevtrick.com )

const _ = e => document.querySelector(e);

const render = _('.result');

// create video

const createVideo = data => {

let v = document.createElement('video');

v.id = "instavideo";

v.src = data.content;

v.controls = true;

v.autoplay = true;

// create info

let info = document.createElement('p');

info.textContent = "Click the right button on video and select save as.";

render.innerHTML = "";

render.appendChild(v);

render.appendChild(info);

};

// create image

const createImg = data => {

// create image

let i = document.createElement('img');

i.id = "instaImg";

i.src = data.content;

// create info

let info = document.createElement('p');

info.textContent = "Click the right button on the image and select save image..";

render.innerHTML = "";

render.appendChild(i);

render.appendChild(info);

};

// extract html

const getMedia = () => {

render.innerHTML = "<div class='image-placeholder'></div>";

// get input value

let url = _('input').value;

if (url) {

fetch(url).

then(r => r.text()).

then(r => {

// render html

render.innerHTML = r;

// wait, find meta and create video or image

let w = setTimeout(() => {

let v = _('meta[property="og:video"]');

if (v) {

createVideo(v);

} else {

let img = _('meta[property="og:image"]');

if (img) {

createImg(img);

} else {

document.body.innerHTML = body;

alert('Error extracting Instagram image / video.');

};

}

clearTimeout(w);

}, 200);

});

} else {

_('input').setAttribute('placeholder', 'Invalid address, use a proper Insagram link');

}

};

That’s It. Now you have successfully created JavaScript Instagram Media Downloader, Save Insta Photos & Videos Program. If you have any doubt or questions comment down below.

Thanks For Visiting, Keep Visiting.

15 COMMENTS

Romit Raj Sahu October 26, 2019 At 10:50 am

Hello Shaan! I needed your help. I was creating a ‘Newsletter Sign Up Form’ for my blog. I have the image of how it should should look, but, I am not able to create it. So, please can you help me in creating that sign up form? If yes, then thanks a lot. This is the image of how my form should look – http://bit.ly/31QTCiq

Reply
poonam patel December 18, 2019 At 5:02 am

If the video or image link has multiple video/image then i couldnt able to get that. in that case what should i do??please help me

Reply
Pankaj Verma June 30, 2020 At 12:29 pm

Hey buddy
Thanks for this code and I also want to ask you something.
I have used this code in my site and also done some modifications. But the code is not adjusting according to mobile devices screen. Please provide some solution for that.

Reply
- keshav July 21, 2020 At 5:41 am
  
  heyy you can use the above meta tag into your of the html. tht will create your webpage…..compatible with all the devices with the device width
  
  Reply
Amos July 2, 2020 At 12:10 pm

I just checked the demo out now, and it seems it is no longer working. please check.

Reply
Isaac October 7, 2020 At 11:59 pm

I love you. Thank you so much. This solution is better than Instagram’s own OEmbed api solution for sharing IG posts on my website, and IDGAF if it violates their TOS. Their embeds take up way too much space with controls that do nothing except redirect to Instagram (just cluttering my page with excessive branding), and they are not as responsive as what you can get with the solution you have here. Furthermore, their embeds are iframes and so there is no way of binding to video events like play, pause, ready, etc.

I love you x1000

-Isaac

Reply
- Moe Bazzi December 19, 2020 At 2:35 am
  
  Hello Isaac, did the exact code from the demo work for you? Or did you have to make any changes?
  
  Reply
  - Moe Bazzi December 19, 2020 At 3:19 am
    
    UPDATE: It is December 18/2020 and I can confirm this demo still works. Thank you so much to the author Shaan!! I was trying to access the video element of instagram embedss but accessing the iframe, but it wouldnt let me access the inner elements of the instagram iframe embed, do you know why this is? Im so glad I found this solution, thank you so much. However, I am still unsure on how you are getting the video data, what exactly is ‘meta[property=”og:video”]’ and how does it work, thanks!!
    
    Reply
Moe Bazzi December 19, 2020 At 5:47 pm

Hello, tahnk you so much! Only one thing tho, this doesnt work for instagram posts with multiple videos. The meta[property=”og:video”] tage doesnt show up in that repsonse html. Any work around to this?

Reply
D March 2, 2021 At 10:14 pm

was working fine but urges it now blocks by CORS error

Reply
JAish July 15, 2021 At 1:56 pm

It is not working now.

Reply
Kanak August 5, 2021 At 10:43 am

Not working now 🙁

Reply
Sarkari Resul August 19, 2021 At 8:58 am

not working this code

Reply
Tada October 10, 2021 At 4:24 pm

Have you checked the application before publishing on Website. The script is not working.

I would suggest just check before publish on website and help people to save their valuable time.

Reply
Dhivakar December 5, 2021 At 10:06 am

not working

Reply