cara memasukkan video YouTube ke Blogger, mulai dari metode manual hingga otomatis, termasuk solusi error yang sering muncul di template Blogger.
📌 Rangkuman: Embed Video YouTube di Blogger (Manual → Otomatis)
✅ 1. Metode Manual (Direkomendasikan untuk Pengguna Biasa)
Cara paling aman dan stabil. Kamu secara manual menempelkan kode embed responsif di setiap postingan.
🔧 Langkah:
1. Salin kode di bawah ini ke mode HTML saat membuat postingan.
2. Ganti `VIDEO_ID` dengan ID video YouTube.
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 10px 0;">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="allowfullscreen">
</iframe>
</div>✅ Kelebihan:
- Mudah dipahami.
- Tidak perlu edit template.
- Responsif & kompatibel semua perangkat.
⚠️ Catatan:
- Jika pakai parameter seperti `?autoplay=1&mute=1`, ganti `&` → `&` agar tidak error di template:
src="https://www.youtube.com/embed/VIDEO_ID?autoplay;amp;mute=1"✅ 2. Metode Semi-Otomatis (Gunakan Snippet)
Simpan kode di atas sebagai snippet (cuplikan) di notepad atau editor favorit, lalu tinggal salin-tempel saat butuh.
💡 Tips:
- Buat shortcut: `YTRESPONSIVE` → ganti dengan kode lengkap.
- Gunakan aplikasi seperti TextExpander atau AutoHotkey untuk otomasi.
✅ 3. Metode Otomatis (JavaScript – Hanya untuk Template)
Video YouTube otomatis berubah jadi embed hanya dengan menulis link biasa di postingan (misal: `https://youtu.be/abc123`).
🔧 Langkah:
1. Buka Tema → Edit HTML.
2. Cari `</body>` dan tempel kode berikut di atasnya:
<script>
document.addEventListener("DOMContentLoaded", function () {
const links = document.querySelectorAll('.post-body a');
links.forEach(link => {
const url = link.href;
// Deteksi YouTube
const match = url.match(/(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|embed)\/|\S*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
if (match) {
const videoId = match[1];
const container = document.createElement('div');
container.style.cssText = 'position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 15px 0;';
container.innerHTML = `
<iframe
src="https://www.youtube.com/embed/${videoId}"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="allowfullscreen">
</iframe>
`;
link.replaceWith(container);
}
});
});
</script>✅ Kelebihan:
- Cukup tulis link YouTube → langsung jadi video.
- Tidak perlu buka mode HTML tiap kali.
⚠️ Catatan:
- Harus escape `&` jadi `&` jika tambah parameter.
- Pastikan class `.post-body` sesuai tema kamu (bisa `.entry-content`, dll).
- Jangan gunakan `&` mentah di template, selalu ganti jadi `&`.
❌ Error Umum & Solusi di Blogger
| Error | Penyebab | Solusi |
|---|---|---|
| -- | -- | |
| `The entity name must immediately follow the '&'` | Pakai `&` di URL | Ganti `&` → `&` |
| `Attribute 'allowfullscreen' must be followed by '='` | `allowfullscreen` tanpa nilai | Ganti jadi `allowfullscreen="allowfullscreen"` |
| Video tidak muncul di HP | Lebar iframe tidak responsif | Gunakan `padding-bottom: 56.25%` + `position: relative` |
🏁 Kesimpulan
| Metode | Kesulitan | Otomatis? | Cocok Untuk |
|---|---|---|---|
| - | - | - | - |
| Manual | Rendah | ❌ | Pemula, jarang posting video |
| Snippet | Rendah | ⚠️ Sebagian | Menulis cepat, ingin efisiensi |
| Otomatis (JS) | Sedang | ✅ | Sering posting video, ingin praktis |
💡 Rekomendasi:
- Jika jarang posting video → gunakan metode manual.
- Jika sering posting video → gunakan metode otomatis dengan JavaScript (dan pastikan sudah perbaiki `&` dan `allowfullscreen`).
Kalau kamu ingin saya bantu cek kode template kamu langsung atau buatkan versi yang sudah 100% aman dari error, cukup kirimkan bagian kodenya — saya bantu perbaiki. 😊