<data:blog.pageTitle/>
<style>
* {
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: #ff3654;
color: #ffffff;
}
code {
background: #ffd12b;
color: #ff3654;
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://i.imgur.com/m7cfeO5.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: #ffd12b;
margin: 0 auto;
text-align: center;
color: #ff3654;
}
::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: #ffffff;
border-color: #ff3654;
border-width: 1px;
color: #ff752b;
transition: all 500ms ease;
}
input:focus, input:hover {
border-color: #ff3654;
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: #ff3654;
border: 1px solid #212121;
color: #ffffff;
transition: all 500ms ease;
}
.search:focus, .search:hover {
background: #23db0b;
border-color: #ff3654;
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: #ffd12b;
border-color: #ffd12b;
border-width: 1px;
color: #ff3654;
transition: all 500ms ease;
}
.result .download:focus, .result .download:hover {
background: #ffd12b;
border-color: #ff3654;
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: #ff3654;
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;
}
}
</style>
<!doctype html>
Instagram Downloader
<link rel="stylesheet" href="style.css" />
<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> Paste the link of any Instagram video and picture in the empty box above. Instantly the download link will be generated. You can download it for free. </p>
</section>
</main>
<script src="function.js"></script>
</!doctype>
<script>
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');
}
};
</script>
