Cara Menyematkan Video YouTube di Blogger agar Responsif

Video YouTube responsif di Blogger dapat dibuat dengan menempatkan iframe dalam pembungkus berasio tetap dan lebar mengikuti ruang artikel. Untuk contoh video lanskap, gunakan rasio 16:9, lalu biarkan iframe mengisi pembungkusnya. Periksa hasil pada layar kecil setelah mengganti identitas video.

Panduan ini menyajikan contoh HTML untuk isi draf. Kodenya ditampilkan sebagai teks agar dapat disalin, bukan sebagai pemutar aktif. Contoh tidak menambahkan skrip sendiri, tetapi pemutar YouTube tetap dapat memuat sumber daya dan JavaScript dari layanannya.

Ambil identitas video dari fasilitas sematkan YouTube

Pilih video yang sesuai pembahasan artikel dan tersedia untuk ditonton oleh pembaca. Tulis alasan penyisipannya: memperlihatkan langkah, menjelaskan gerakan, atau memberi demonstrasi yang sulit diterangkan hanya dengan gambar. Tempatkan penjelasan singkat di sekitar pemutar agar konteksnya jelas.

Bantuan YouTube tentang penyematan menjelaskan langkah pada komputer: buka video, pilih Bagikan, pilih Sematkan, lalu salin HTML yang disediakan. Perhatikan alamat src pada iframe tersebut; identitas video berada setelah bagian /embed/.

Pada contoh di bawah, tulisan VIDEO_ID adalah penanda yang wajib diganti. Gunakan identitas dari kode semat video pilihan Anda. Menempel URL halaman tontonan lengkap ke posisi penanda tersebut tidak menghasilkan alamat embed yang sama.

Bantuan video Blogger juga menyediakan cara melalui Sisipkan video pada editor, lalu memilih video dari YouTube atau mengunggah dari komputer. Pendekatan HTML dalam panduan ini berguna ketika Anda ingin mengatur pembungkus responsif pada satu komponen postingan.

Gunakan pembungkus rasio dan iframe yang mengisinya

Properti aspect-ratio menurut MDN menetapkan perbandingan lebar dan tinggi kotak. Agar berpengaruh, sedikitnya satu dimensinya perlu otomatis. Pada contoh ini, pembungkus memakai lebar 100% dan tinggi otomatis, sehingga rasio menentukan ruang vertikalnya.

Iframe ditempatkan memenuhi pembungkus dengan lebar dan tinggi 100%. Angka atribut 560 dan 315 juga berasio 16:9; aturan CSS menentukan ukuran tampilannya. Contoh berikut dirancang untuk video yang berada di bawah layar awal, sehingga memuat atribut lazy.

Dokumentasi pemutar YouTube menetapkan ukuran minimum 200 × 200 piksel dan ruang yang cukup untuk kontrol. Karena itu, pembungkus memakai min-height 200 piksel; pada layar sempit, tinggi minimum dapat mengalahkan rasio 16:9. Jika kolom artikel kurang dari 200 piksel, jangan pasang contoh ini: ganti seluruh blok dengan tautan ke halaman tontonan YouTube melalui editor.

<div style="position:relative;width:100%;height:auto;min-height:200px;aspect-ratio:16/9;margin:1.25rem 0;">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Video panduan pemasangan template Blogger — ganti sesuai video"
    width="560"
    height="315"
    loading="lazy"
    referrerpolicy="strict-origin-when-cross-origin"
    allow="encrypted-media; picture-in-picture"
    allowfullscreen
    style="position:absolute;inset:0;display:block;width:100%;height:100%;border:0;">
  </iframe>
</div>

Ganti VIDEO_ID dan title sebelum mencoba hasilnya. Dokumentasi iframe MDN menjelaskan penggunaan title untuk mengenali isi bingkai serta allowfullscreen untuk mengizinkan tampilan layar penuh. Buat title yang menjelaskan video sebenarnya, bukan sekadar menyalin kata “video”.

Rasio 16:9 merupakan pilihan contoh untuk video lanskap. Bila materi membutuhkan rasio lain, sesuaikan pembungkus dan periksa tampilan pemutarnya. Jangan memaksa semua video mengikuti angka yang sama hingga isi atau kontrolnya menjadi sulit digunakan.

Contoh tidak memakai parameter autoplay. Pembaca memulai pemutaran melalui kontrol yang tersedia. Pertahankan penutup iframe dan pembungkus ketika menyunting agar elemen setelahnya tidak ikut masuk ke struktur yang keliru.

Pasang pada isi draf dan tentukan cara memuatnya

Simpan salinan isi sebelum mengubah postingan penting. Anda dapat memakai panduan backup Blogger bila juga membutuhkan catatan cadangan yang lebih luas. Untuk latihan ini, cukup gunakan satu draf tanpa mengganti tema.

Pilih Tampilan HTML pada editor postingan dan tempel contoh setelah sebuah paragraf yang sudah ditutup. Ganti penandanya, lalu buka pratinjau. Yang seharusnya terlihat pada draf percobaan adalah area pemutar, bukan tulisan tag HTML seperti di kotak kode tutorial ini.

Panduan lazy loading iframe di web.dev menjelaskan bahwa loading lazy dapat menunda pemuatan bingkai yang berada di luar layar sampai pengguna mendekatinya. Ini bukan mekanisme yang hanya bekerja setelah tombol putar diklik.

Gunakan lazy untuk penempatan yang belum terlihat pada awal halaman. Jika pemutar merupakan bagian utama yang langsung dibutuhkan pada layar pertama, hapus atribut loading="lazy" dari contoh. Nilai penempatan berdasarkan halaman sebenarnya, termasuk pada ponsel, bukan hanya posisi di editor.

Pembungkus tetap menyediakan ruang sesuai rasio sebelum pemutar tampil. Periksa pula apakah tema memberikan aturan ukuran lain pada iframe atau pembungkus. Ubah bagian yang berkaitan dengan komponen ini setelah mengetahui penyebabnya, tanpa menambahkan aturan global secara sembarangan.

Uji ukuran, pemutaran, dan pesan kesalahan

Buka pratinjau pada lebar desktop dan layar ponsel. Pastikan pemutar mengikuti ruang artikel, tidak membuat halaman melebar, serta menyediakan kontrol yang dapat disentuh. Coba orientasi tegak dan mendatar bila tersedia.

Periksa pula urutan fokus dengan keyboard. Dari bagian sebelum video, gunakan Tab untuk masuk ke kontrol pemutar, kemudian pastikan Anda dapat melanjutkan ke isi setelahnya. Jangan menambahkan lapisan transparan atau tautan yang menutup area kontrol; bingkai yang ukurannya benar tetap perlu mudah digunakan.

Setelah penanda diganti dengan video sebenarnya, coba putar, jeda, dan layar penuh. Pastikan video yang tampil sesuai konteks artikel. Pengujian ini perlu dilakukan dari halaman yang menyematkannya, bukan hanya dengan membuka alamat embed langsung.

Jika pemutar tidak bekerja, periksa ID dan kemampuan video untuk disematkan. YouTube menjelaskan bahwa pemilik dapat menonaktifkan penyematan, sementara video dengan batas usia memiliki keterbatasan pada situs pihak ketiga. Kegagalan seperti ini tidak selalu disebabkan ukuran CSS.

YouTube juga mensyaratkan HTTP Referer untuk pemutaran sematan; ketiadaannya dapat memicu error 153. Contoh memakai referrerpolicy strict-origin-when-cross-origin. Hindari mengubahnya menjadi no-referrer ketika mencoba memperbaiki tampilan, karena perubahan itu dapat menghilangkan informasi yang diperlukan pemutar.

Gunakan checklist pengujian template Blogger untuk memeriksa ruang konten dan navigasi di sekitar video. Simpan draf, buka kembali editor, dan periksa pratinjau setelah perubahan tersimpan.

Rawat konteks video dan bedakan tampilan dari pengindeksan

Tinjau kembali sematan ketika video dipindahkan, dihapus, atau pembahasan artikel berubah. Perbarui uraian di sekitar pemutar agar pembaca mengetahui manfaat menontonnya. Jika video penting untuk mengikuti tutorial, sediakan ringkasan langkah yang tetap membantu memahami artikelnya.

Panduan video Google membedakan halaman yang tujuan utamanya menonton satu video dari artikel yang memakai video sebagai pelengkap. Artikel terindeks tidak otomatis berarti videonya juga terindeks. Contoh responsif ini tidak menjamin kelayakan fitur video, pengindeksan, atau peringkat tertentu.

Catat URL artikel, identitas video, posisi pemutar, dan hasil pemeriksaan. Dengan catatan tersebut, perawatan berikutnya dapat berfokus pada perubahan yang nyata: sumber video, ukuran, cara memuat, atau konteks penjelasannya.