Skip to main content

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,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");}


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(/&quot;|&#34;|%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}">&nbsp;</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

Popular posts from this blog

[ERROR BUG]
ChatGPT+Gemini: TikTok → Blogger Embed Converter using Cloudflare/Online Server

🔄 Refresh Page ERROR BUG: The connection is blocked because it was initiated by a public page to connect to devices or servers on your local network. Planning: Revise Program CODE Code USING Javascript/Online Server Code NOT USING Javascript Sample Working Code aka Already Repaired! Temporary Solution is by Asking AI Assistant to do REPAIR CODE of (Not yet Repaired) Current Conversion Program Code-Output TikTok Archive – Embedded Preview TikTok Embed ▶ View this video on TikTok ⚠️ DISCLAIMER: INPUT URL LIMITATION This program is currently restricted to processing Full Browser URLs only. It does not support TikTok’s mobile "short-link" format (e.g., vt.tiktok.com ). Required Action: Users must open the video in a web browser and copy the expanded URL from the address bar before pasting it into this program. URL Conversion Example ❌ UNSUPPORTED: https://vt.tiktok.com/ZSaXoFyov/ ✅ REQ...

Repost! Web-Based to Android Apps Convertion (MEDIAN.CO etc.)

CONTOH HASIL Android APK "PROGRAM" SAMPLE: Youtube and Instagram EMBEDded to Blogger/Blogspot.com SOURCE CODE Click this box to download Contoh Sample SHORTCUT-APPs "precise" click to download : median.co R8: ronin1985.blogspot.com R2M: ronin-manu.blogspot.com Gw udah coba Median.co utk mengubah Website gw menjadi Aplikasi Android Keren bet!! Median.co Cekidot Software lain yg mirip! ChatGPT : If you're looking for tools similar to Median.co to convert websites into Android apps, here are some top alternatives, especially for no-code or low-code users: 🔧 Best Tools Like Median.co to Convert Website to Android Apps 1. WebViewGold Platform: Windows/macOS (Xcode/Android Studio) Key Feature: Converts any website into iOS/Android app via WebView. Pros: One-time purchase Custom splash screen, push notifications Can open external links in external browser Cons:  Requi...

REPOST: Studying WATER PUMP by ROMAN ENGINEERING

*^ Ini yg Asli Gan! Mekanisme pada Concrete Pump: Kok ky Sistem Mekanik Romawi ya?! Tapi malah bisa HANYA pake PER aka bukan "MATA BOR look a like" Mekanisme Drill yg Cost Pembuatan bikin REPOT aka harus Tool SUPER Khusus Dari Material Besi yg digunakan terlihat langsung secara kasat mata Jauh Lebih Banyak drpd Per Biasa seperti yg ditunjukkan pd Video Alternatif dgn Penggunaan PER Video dr Instagram: Source: YouTube Rome's drainage machines #history #romanempire #engineering