SOURCE CODE: VIDEO EMBED CONVERTER for BLOGGER in Responsive FULL WIDTH by ChatGPT v2 (YOUTUBE dan INSTAGRAM ONLY)
<!--Unified Shaded Box - Auto Width-->
<a href="https://drive.google.com/file/d/1-Fk8cAGIsbM9Jj2P5wVEPi3c9Lcth0De/view?usp=sharing" style="color: inherit; text-decoration: none;" target="_blank">
<div onmouseout="this.style.background='linear-gradient(180deg,#f9f9f9,#ececec)'" onmouseover="this.style.background='linear-gradient(180deg,#ffffff,#e7e7e7)'" style="background: linear-gradient(rgb(249, 249, 249), rgb(236, 236, 236)); border-radius: 14px; border: 1px solid rgb(208, 208, 208); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 10px; display: inline-block; font-family: Arial, sans-serif; margin: 15px 0px; padding: 18px 24px; transition: 0.25s;">
<div style="font-size: 16px; font-weight: bold; margin-bottom: 6px; text-align: center;">
ANDROID APK by MEDIAN.CO
</div>
<div style="font-size: 15px; margin-bottom: 4px; text-align: center;">
DOWNLOAD LINK!
</div>
<div style="font-size: 15px; margin-bottom: 4px; text-align: center;">
Youtube and Instagram Video-Embedding
</div>
<div style="font-size: 15px; text-align: center;">
CODE CONVERTER to BLOGGER.COM</div>
</div>
</a>
<!--VIDEO EMBED CONVERTER PRO v2.6.3 (Blogger-Safe Edition)-->
<style>
.ig-container {
width:100%!important;
max-width:100%!important;
margin:0 auto!important;
box-sizing:border-box;
}
.ig-container blockquote.instagram-media {
width:100%!important;
max-width:100%!important;
margin:0 auto!important;
background:#fff!important;
border:0!important;
}
</style>
<div id="vec-wrapper" style="border: 1px solid rgb(221, 221, 221); margin: 16px 0px; padding: 16px;">
<div style="margin-bottom: 15px; text-align: center;">
<button onclick="location.reload()" onmouseout="this.style.background='#f1f1f1'" onmouseover="this.style.background='#e6e6e6'" style="background: rgb(241, 241, 241); border-radius: 6px; border: 1px solid rgb(187, 187, 187); box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 5px; cursor: pointer; font-weight: bold; padding: 10px 20px; transition: 0.2s;">
🔄 Refresh Page
</button>
</div>
<h3 style="margin-top: 0px; text-align: center;">🎬 VIDEO EMBED CONVERTER</h3><h3 style="margin-top: 0px; text-align: center;"><span style="color: #ff00fe;">Responsive FULL WIDTH</span></h3>
<h3 style="margin-top: 0px; text-align: center;">YouTube dan Instagram</h3>
<label style="font-weight: bold;">1) Paste URLs here:</label>
<textarea id="vec-input" style="font-family: Consolas; min-height: 100px; padding: 8px; width: 100%;"></textarea>
<div style="margin: 10px 0px;">
<span style="font-weight: bold;">2) Generated Embed Code:</span>
<select id="vec-mode">
<option value="card">Bootstrap Card</option>
<option value="shade">Shaded Box</option>
<option value="raw">Raw HTML Only</option>
</select>
<button id="vec-copy-btn">Copy</button>
</div>
<pre id="vec-output" style="background: rgb(30, 30, 30); color: #d4d4d4; min-height: 200px; overflow-x: auto; padding: 12px;"></pre>
<h4>3) Live Preview:</h4>
<div id="vec-preview" style="background: rgb(250, 250, 250); padding: 10px;">
<em>Paste URL to preview…</em>
</div>
</div>
<script>
var inputEl=document.getElementById("vec-input");
var outputEl=document.getElementById("vec-output");
var previewEl=document.getElementById("vec-preview");
var copyBtn=document.getElementById("vec-copy-btn");
var modeEl=document.getElementById("vec-mode");
var ytTitleCache={};
var INDENT=" ";
function esc(s){return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");}
function norm(u){
u=u.trim();
if(!u)return"";
if(!/^https?:\/\//i.test(u))u="https://"+u;
return u;
}
function sanitizeUrl(u){
if(!u)return"";
u=u.trim();
u=u.replace(/^"+|"+$/g,"");
u=u.replace(/"|"|%22/gi,"");
u=u.replace(/\)+$/,"");
return norm(u);
}
function getPlatform(u){
if(u.includes("youtu"))return"YouTube";
if(u.includes("tiktok"))return"TikTok";
if(u.includes("instagram"))return"Instagram";
return"Video";
}
function fallbackTitle(u){
try{
var x=new URL(u);
var p=x.pathname.split("/").filter(Boolean);
return p.pop()||u;
}catch(e){return u;}
}
function splitYtTitle(t){
var m=t.match(/\([^()]*\)\s*$/);
if(!m)return{platform:"Source: YouTube",main:t,extra:""};
return{platform:"Source: YouTube",main:t.replace(/\([^()]*\)\s*$/,"").trim(),extra:m[0].trim()};
}
function fetchYTTitle(u){
if(ytTitleCache[u])return Promise.resolve(ytTitleCache[u]);
return fetch("https://www.youtube.com/oembed?format=json&url="+encodeURIComponent(u))
.then(r=>r.ok?r.json():null)
.then(d=>{
if(d&&d.title){ytTitleCache[u]=d.title;return d.title;}
return null;
})
.catch(()=>null);
}
function getTitle(u,p){
if(p==="YouTube"){
return fetchYTTitle(u).then(t=>{
if(t)return splitYtTitle(t);
return{platform:"Source: YouTube",main:fallbackTitle(u),extra:""};
});
}
return Promise.resolve({platform:"Source: "+p,main:fallbackTitle(u),extra:""});
}
function ytId(u){
var m;
if((m=u.match(/youtu\.be\/([^?&]+)/)))return m[1];
if((m=u.match(/shorts\/([^?&]+)/)))return m[1];
if((m=u.match(/[?&]v=([^?&]+)/)))return m[1];
return"";
}
function ytIsShort(u){return u.includes("/shorts/");}
function ytEmbed(u){
var id=ytId(u);
if(!id)return"<!-- Invalid YouTube link -->";
var ratio=ytIsShort(u)?"177%":"56.25%";
return `<div style="max-width:100%;margin:0 auto;"><div style="position:relative;width:100%;padding-bottom:${ratio};overflow:hidden;"><iframe src="https://www.youtube.com/embed/${id}" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"></iframe></div></div>`;
}
function tkEmbed(u){
return `<blockquote class="tiktok-embed" cite="${u}" style="max-width:100%;min-width:100%;margin:0 auto;"><section></section></blockquote>`;
}
function igEmbed(u){
return `<div class="ig-container"><blockquote class="instagram-media" data-instgrm-permalink="${u}" data-instgrm-version="14"><a href="${u}"> </a></blockquote></div>`;
}
function wrap(inner,t,mode){
var titleHTML=
`<div style="font-weight:bold;font-size:14px;">${esc(t.platform)}</div>`+
`<div style="font-size:14px;">${esc(t.main)}</div>`+
(t.extra?`<div style="font-size:13px;color:#555;">${esc(t.extra)}</div>`:"");
if(mode==="raw")return inner;
if(mode==="shade"){
return `<div style="max-width:900px;margin:0 auto 16px;padding:12px;background:#f7f7f7;border:1px solid #ddd;border-radius:6px;">${titleHTML}<div style="margin-top:8px;">${inner}</div></div>`;
}
return `<div style="max-width:900px;margin:0 auto 16px;border:1px solid #dee2e6;border-radius:8px;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,0.05);"><div style="padding:8px 12px;border-bottom:1px solid #dee2e6;background:#f8f9fa;">${titleHTML}</div><div style="padding:12px;">${inner}</div></div>`;
}
function convertAsync(raw,mode){
var u=sanitizeUrl(raw);
if(!u)return Promise.resolve({html:"<!-- Empty -->",hasIG:false,hasTK:false});
var p=getPlatform(u);
var embed=p==="YouTube"?ytEmbed(u):p==="TikTok"?tkEmbed(u):p==="Instagram"?igEmbed(u):"<!-- Unsupported -->";
return getTitle(u,p).then(t=>({html:wrap(embed,t,mode),hasIG:p==="Instagram",hasTK:p==="TikTok"}));
}
function formatHTML(h){
h=h.replace(/\r?\n/g,"").replace(/>\s*</g,"><");
var parts=h.split(/(?=<)/g);
var lvl=0,out="";
parts.forEach(l=>{
l=l.trim();
if(!l)return;
if(l.startsWith("</"))lvl--;
out+=INDENT.repeat(Math.max(lvl,0))+l+"\n";
if(l.match(/^<[^\/!][^>]*[^\/]>$/))lvl++;
});
return out.trim();
}
function processAll(){
var urls=inputEl.value.split(/\n/).map(s=>s.trim()).filter(Boolean);
var mode=modeEl.value;
if(!urls.length){
outputEl.textContent="";
previewEl.innerHTML="<em>No valid URL.</em>";
return;
}
Promise.all(urls.map(u=>convertAsync(u,mode))).then(res=>{
var htmlList=res.map(r=>r.html).join("\n\n");
var final=htmlList;
if(res.some(r=>r.hasIG)){
final+= '\n\n<script async src="//www.instagram.com/embed.js"></'+'script>';
}
if(res.some(r=>r.hasTK)){
final+= '\n\n<script async src="https://www.tiktok.com/embed.js"></'+'script>';
}
outputEl.textContent=formatHTML(final);
previewEl.innerHTML=htmlList;
if(window.instgrm&&window.instgrm.Embeds)
window.instgrm.Embeds.process();
});
}
inputEl.addEventListener("input",processAll);
modeEl.addEventListener("change",processAll);
copyBtn.addEventListener("click",()=>{
var t=outputEl.textContent;
if(!t.trim())return;
navigator.clipboard.writeText(t);
copyBtn.textContent="Copied!";
setTimeout(()=>copyBtn.textContent="Copy",1200);
});
processAll();
</script>
<script async="" src="//www.instagram.com/embed.js"></script>
<script async="" src="https://www.tiktok.com/embed.js"></script>
<script>
function fixInstagramHeight(){
var frames=document.querySelectorAll("iframe.instagram-media, .instagram-media iframe");
frames.forEach(f=>{
f.style.width="100%";
f.style.maxWidth="100%";
try{
var d=f.contentWindow.document;
var h=d.body.scrollHeight;
if(h>0)f.style.height=h+"px";
}catch(e){}
});
}
window.addEventListener("load",()=>{setTimeout(fixInstagramHeight,1500);});
</script>
Comments