Cara Menyematkan Video YouTube di Situs Web

Bayangkan menambahkan video YouTube ke situs Anda hanya dalam beberapa detik – dan membantu Anda mengubah kunjungan menjadi konversi. Pelajari cara menyematkan video, daftar putar, atau feed yang tetap segar secara otomatis dengan pengaturan tanpa kode yang mudah.
Lihat pendapat ChatGPT Buka Editor Widget Langsung
How to Embed a Youtube Video on Website

Pernah mencoba menambahkan video YouTube ke situs Anda dan akhirnya terjebak dengan plugin berat yang tidak cocok dengan desain Anda? Anda tidak sendirian: banyak pemilik situs kesulitan menjaga media tertanam tetap konsisten, responsif, dan terlihat serasi dengan pengaturan mereka. Bagian video yang ditempatkan dengan baik—menampilkan demo produk, ulasan, atau cuplikan di balik layar—dapat membantu pengunjung memahami penawaran Anda lebih cepat dan tetap berada di situs Anda lebih lama.

YouTube Gallery widget. It updates automatically with your latest uploads, adjusts to any website layout, and matches your brand’s design, keeping your pages fresh and dynamic without you touching a line of code.”>Jika Anda ingin menyematkan saluran YouTube, daftar putar, atau video tunggal tanpa repot pengaturan manual atau masalah gaya, cara termudah adalah dengan widget YouTube Gallery. Ia memperbarui secara otomatis dengan unggahan terbaru Anda, menyesuaikan dengan tata letak situs mana pun, dan mencocokkan desain merek Anda, menjaga halaman Anda tetap segar dan dinamis tanpa Anda menulis satu baris kode pun.

Dalam panduan ini, Anda akan mempelajari bagaimana:



  • Ubah konten YouTube Anda menjadi pengalaman di situs yang mendorong klik.
  • Jaga feed YouTube Anda tetap selaras dengan galeri video yang sepenuhnya bisa disesuaikan.
  • Optimalkan widget Anda untuk hasil terbaik: mulai dari penyempurnaan tata letak hingga pengaturan tampilan
  • Atasi masalah penyematan umum yang memperlambat Anda atau merusak tata letak.

Panduan ini mencakup dua opsi pengaturan: pengaturan cepat empat langkah untuk menjalankan Galeri YouTube Anda segera, dan panduan langkah-demi-langkah lengkap bagi yang menginginkan panduan lebih lanjut serta tips profesional. Mari kita mulai dengan pengaturan instan:

Sematkan YouTube di Situs Web dalam 5 Menit

Siap melihat widget beraksi? Berikut cara menambahkan video YouTube ke situs Anda hanya dalam beberapa klik:

  1. Buka Elfsight’s editor dan pilih template.
  2. Sesuaikan widget YouTube Anda.
  3. Klik ‘Tambahkan ke situs web secara gratis’ dan salin kode yang dihasilkan.
  4. Tempelkan ke backend situs web Anda.

Coba Galeri YouTube sekarang – tambahkan sumber video pertama Anda dalam beberapa menit!

Fitur Unggulan yang Menghidupkan Widget Umpan YouTube Anda

Begitu widget YouTube pertama Anda aktif, saatnya melihat apa yang membuatnya bersinar. Fitur bawaan ini mengubah penyematan sederhana menjadi pengalaman video yang dinamis dan selaras dengan merek Anda:

Fitur Utama Mengapa Ini Penting
Tampilkan konten YouTube apa pun, dikelompokkan dan diberi label Tampilkan saluran, daftar putar, atau video yang paling relevan dengan cara yang mudah dinavigasi pengunjung.
Tiga versi pratinjau dan mode pemutaran yang bisa dipilih Atur cara penonton menonton video Anda, dengan opsi pop-up, inline, atau pemutaran YouTube bawaan.
Preset gaya kustom dan warna untuk setiap elemen Sesuaikan desain galeri Anda dengan merek atau situs web Anda hanya dengan beberapa klik.
Tata Letak Galeri yang Fleksibel dan Kontrol Navigasi Susun video dalam kolom dan baris, tambahkan fungsi pencarian, dan biarkan pengunjung menemukan apa yang mereka minati dengan cepat.
Integrasi AdSense untuk monetisasi langsung Dapatkan pendapatan iklan dengan menampilkan video langsung di galeri situs Anda.

Ini hanyalah beberapa keuntungan yang membantu widget Anda meningkatkan keterlibatan pengguna dan menjaga konten video Anda tetap terorganisir. Untuk daftar lengkapnya, lihat Halaman Fitur Galeri YouTube Features Page.

Cara Menyematkan Kanal YouTube di Situs Anda: Langkah demi Langkah

Sekarang Anda tahu apa yang bisa dilakukan widget, mari kita terapkan fiturnya. Ikuti panduan langkah demi langkah ini untuk membangun dan menyesuaikan Galeri YouTube Anda dari awal hingga selesai.

1. Pilih templat

Hal pertama yang Anda lihat di editor Galeri YouTube adalah pilihan tiga gaya tata letak utama:

  • The Grid menampilkan video dalam baris
  • Daftar menumpuknya secara vertikal dengan lebih banyak ruang untuk deskripsi
  • Slider menampilkannya dalam karusel yang bisa digeser

Tata letak Slider memungkinkan Anda menyematkan daftar putar YouTube pilihan Anda alih-alih menampilkan seluruh umpan. Untuk pengaturan yang minimalis, ada juga opsi untuk menambahkan tombol Berlangganan YouTube atau satu video saja — peluncuran produk terbaru, perkenalan merek, atau testimonial pelanggan terbaru.

Choose a template for YouTube embed

Setelah Anda memilih tata letak yang Anda suka – klik “Lanjutkan dengan templat ini”.

2. Tambahkan Sumber

Langkah ini menentukan apa yang akan dilihat pengunjung di galeri. Buka tab “Sumber” di panel kiri dan tambahkan tautan ke video YouTube, daftar putar, atau seluruh saluran Anda — mana pun yang paling sesuai dengan tujuan Anda. Ingin menjaga keteraturan? Buat Kelompok Sumber seperti “Tutorials” atau “Testimonials” untuk menambahkan tab yang rapi dan dapat diklik yang memudahkan penelusuran video Anda.

Add channel source

3. Sesuaikan Tata Letak

Sekarang video Anda telah masuk, saatnya membentuk bagaimana tampil di situs Anda. Pilih apakah menampilkan info saluran dan detail video, dan tentukan bagaimana pemirsa akan menonton – Inline (tepat di halaman), dalam kotak cahaya Popup, atau langsung di YouTube. Anda juga bisa menyempurnakan Navigasi untuk slider dengan opsi panah, geser, titik, atau gulir untuk menciptakan pengalaman menonton yang mulus dan intuitif.

Adjust the layout of the widget

4. Atur Desain

Kini saatnya membuat widget terasa seperti bagian alami dari situs Anda. Di tab Penampilan, mulai dengan preset Skema Warna atau atur palet Kustom. Anda kemudian dapat menyempurnakan warna untuk Header, tombol, elemen teks, dan latar belakang agar selaras dengan gaya merek Anda.

Customize the appearance of the plugin

Untuk kendali penuh, editor memungkinkan Anda menempelkan kode CSS Anda sendiri. Misalnya, Anda bisa membuat thumbnail lebih besar atau menyelaraskan teks secara berbeda. Jangan ragu untuk menjelajahi Forum kami untuk kode siap pakai dari pengguna lain.

5. Finalisasi widget

Sebelum Anda mempublikasikan, beberapa pengaturan opsional namun kuat layak diperiksa. Secara default, widget menggunakan kunci Elfsight untuk mengambil video, tetapi untuk banyak video atau lalu lintas yang tinggi Anda bisa menambahkan Kunci API Data YouTube Anda sendiri dari Google Cloud Console. Klik Dapatkan kunci API saya untuk petunjuk rinci.

Pada tahap ini, Anda juga bisa mengaktifkan Mode Privasi yang Ditingkatkan untuk memutar video menggunakan domain youtube-nocookie.com dan menjaga data pengunjung Anda tetap lebih aman, serta mengatur bahasa widget dengan memilih salah satu dari menu dropdown di bagian atas.

Fix the settings of the YouTube gallery

6. Dapatkan Kode Instalasi

Ketika desain widget Anda terasa selesai, klik “Tambahkan ke situs web secara gratis.” untuk menghasilkan kode pemasangan unik Anda. Salin potongannya saja – Anda akan menempelkannya ke backend situs web Anda pada langkah berikutnya untuk menghidupkan galeri video Anda langsung di halaman Anda.

Fix the settings of the YouTube gallery

7. Tambahkan Feed YouTube ke Situs Web

Setelah Galeri YouTube Anda disesuaikan dan kode pemasangan telah disalin, langkah terakhir adalah menyematkannya di situs Anda. Di bawah ini adalah tiga metode pemasangan paling umum yang bekerja hampir di semua platform — mulai dari Shopify dan Wix hingga WordPress dan Squarespace.

Opsi 1: Sematkan pada halaman tertentu

Alur kerja singkat: Editor Halaman → Tambah blok HTML → Tempel kode → Simpan

  • Buka Editor Halaman situs web Anda
  • Tambahkan blok HTML, Embed, atau Kode Kustom.
  • Tempelkan potongan kode pemasangan widget YouTube ke area kode.
  • Simpan dan pratinjau halaman untuk memeriksa penempatan dan responsivitas

Kami sarankan menempatkan galeri Anda di dekat demo produk, tutorial, atau bagian testimoni untuk memaksimalkan keterlibatan dan mendorong pengunjung lebih jauh ke dalam kisah merek Anda.

Opsi 2: Tambahkan widget secara global ke semua halaman

Alur kerja singkat: Pengaturan Tema/Header → Injeksi kode global → Tempel kode → Publikasikan

  • Buka Tema situs Anda atau Pengaturan Global
  • Temukan opsi Kode Kustom atau Sematan di Seluruh Situs
  • Tempel cuplikan pemasangan sebelum </body> tag
  • Simpan dan muat ulang situs Anda

Metode ini memastikan konten YouTube Anda terlihat di semua halaman — ideal untuk header lengket, footer, atau bagian promosi merek.

Opsi 3: Galeri video Mengambang (selalu terlihat)

Ingin galeri YouTube Anda atau video tunggal tetap terlihat saat pengunjung menggulir? Aktifkan Tata Letak Mengambang di dalam pengaturan widget Tata Letak → Penempatan, lalu pasang seperti biasa.

  • Buka pengaturan widget → Tata Letak → Posisi
  • Pilih penempatan Floating
  • Pilih posisi sudut (Kiri atau Kanan)
  • Simpan dan tempelkan potongan kode instalasi di situs Anda

Pengaturan YouTube Mana yang Paling Cocok untuk Anda? Ayo Bandingkan

Elfsight memudahkan penyematan — tetapi itu bukan satu-satunya opsi. Mari kita bandingkan cepat cara-cara alternatif untuk menambahkan video YouTube sehingga Anda bisa menemukan susunan yang tepat.

Menyematkan Langsung Menggunakan Kode HTML YouTube

  1. Temukan Video YouTube. Buka video yang ingin Anda tambahkan.
  2. Bagikan dan Pilih Sematkan. Klik tombol Bagikan di bawah video dan pilih Sematkan.
  3. Salin Kode Sematkan. Salin kode HTML yang dihasilkan YouTube.
  4. Tempel di Editor Situs. Tambahkan blok HTML kustom atau blok kode, lalu tempel kode sematannya.
  5. Simpan dan Publikasikan. Simpan perubahan Anda dan publikasikan situs Anda.

Rincian lebih lanjut tersedia di Pusat Bantuan resmi YouTube.

Menggunakan Blok Pembuat Situs Web Drag-and-Drop

  1. Buka Editor Situs Web. Pergi ke editor pembuat situs web Anda.
  2. Tambahkan Blok Video. Pilih blok YouTube atau blok video dari menu.
  3. Tempelkan Tautan Video. Tempelkan URL video YouTube ke blok ini.
  4. Atur dan Ubah Ukuran Blok. Pindahkan atau ubah ukuran blok sesuai kebutuhan di halaman.
  5. Publikasikan Perubahan
📌 Catatan: Tidak Cocok untuk Galeri. Sebagian besar blok bawaan hanya memungkinkan Anda menambahkan satu video, bukan galeri atau daftar putar penuh.

Detail lebih lanjut tersedia di dokumentasi dukungan pembuat situs Anda.

Menyematkan Kanal YouTube atau Daftar Putar

  1. Pergi ke Saluran atau Playlist. Temukan saluran atau daftar putar yang ingin Anda sematkan.
  2. Klik Bagikan dan Pilih Sematkan. Gunakan tombol Bagikan dan pilih Sematkan.
  3. Salin Kode Sematkan. Salin kode HTML yang disediakan.
  4. Tambahkan ke Situs. Tempelkan kode ke blok HTML kustom atau area serupa.
  5. Simpan dan Publikasikan. Simpan perubahan dan publikasikan situs web Anda.

Detail lebih lanjut tersedia di Panduan Sematan YouTube.

Bagaimana Perbandingan Metode Ini?

Metode Pro Utama 👍 Kendala Utama 👎
Widget Elfsight Galeri sepenuhnya bisa disesuaikan tanpa branding YouTube. Memerlukan akun terpisah dan mungkin memiliki batasan penggunaan.
Sematkan YouTube Langsung Cepat diatur dengan pemutar YouTube resmi. Tidak ada kendali atas branding, iklan, atau video terkait.
Blok Pembuat Situs Mudah bagi pemula untuk menambahkan video tunggal. Tidak bisa membuat galeri atau daftar putar dengan tata letak yang fleksibel.
Sisipkan Kanal/Playlist Memperbarui secara otomatis dengan video-video baru dari saluran. Penampilan dan fungsionalitas galeri telah diperbaiki oleh YouTube.

Tak peduli metode mana yang Anda pilih, sentuhan kecil bisa membuat perbedaan besar. Berikut daftar periksa kami yang terbukti untuk mengoptimalkan Galeri YouTube Anda agar tampil maksimal.

📝 Daftar Periksa Galeri YouTube: Optimalkan Keberhasilan

Berdasarkan pengalaman tim Elfsight membantu ribuan situs dalam menyematkan galeri YouTube yang menarik, kami tahu detail kecil bisa membuat perbedaan besar. Berikut rekomendasi teratas kami untuk memaksimalkan pengaturan YouTube Video Widget Anda.

  1. Perjelas strategi pemilihan video Anda. Tentukan apakah akan menampilkan saluran, daftar putar, atau video tunggal agar sesuai dengan tujuan situs web Anda dan minat audiens.
  2. Kelompokkan dan beri label koleksi video. Gunakan label grup yang jelas dan organisasi yang logis sehingga pengunjung dapat dengan cepat menemukan apa yang menarik bagi mereka di galeri Anda.
  3. Uji beberapa tata letak pratinjau.
  4. Batasi jumlah video awal. Mulailah dengan 6–9 video yang terlihat dan biarkan pengguna memuat lebih banyak. Ini membuat widget tetap ringan dan meningkatkan kecepatan halaman.
  5. Sesuaikan warna untuk branding. Atur warna header, grup, dan video menggunakan preset atau opsi kustom agar galeri cocok dengan palet situs Anda.
  6. Optimalkan untuk semua perangkat. Gunakan kontrol responsif untuk mengatur kolom dan lebar untuk desktop, tablet, dan ponsel. Pratinjau di setiap perangkat untuk menghindari konten terpotong.
  7. Aktifkan pencarian dan kontrol navigasi. Tambahkan bilah pencarian atau panah navigasi untuk penelusuran yang lebih mudah, terutama dengan galeri video yang lebih besar.
  8. Integrasikan AdSense untuk monetisasi. Hubungkan akun AdSense Anda di pengaturan widget untuk menghasilkan pendapatan dari lalu lintas video yang disematkan.
  9. Gunakan editor langsung untuk penyempurnaan. Lakukan penyesuaian bertahap dan periksa pratinjau instan sebelum publikasi untuk memastikan setiap elemen terlihat tepat.

Sekarang Anda telah menyiapkan semuanya, mari kita lihat bagaimana Galeri YouTube berfungsi secara praktis. Inilah bagaimana seorang kreator menjadikan widget-nya sebagai pusat peningkat lalu lintas di situs web milik mereka.

Dampak Galeri YouTube: Hasil nyata dari Pengguna Elfsight

Dumb Industries menghadirkan siaran langsung komedi & seni, termasuk acara seperti The Mads Are Back, The Mystery Hour, dan sesi nonton bareng. Situs web mereka menampilkan kalender acara mendatang, konten keanggotaan, rekaman ulang, dan merchandise. Meskipun video menjadi inti merek mereka, cara klip dan siaran langsung yang ditampilkan sebelumnya terasa tidak terkoordinasi.

Sebelum menggunakan Elfsight

Pilihan tampilan video bawaan membuat konten tersebar di berbagai halaman tanpa tata letak yang jelas untuk melihat acara terbaru atau video unggulan secara sekilas. Pengunjung kesulitan menemukan konten terbaru, dan situs web kehilangan hub pusat untuk menyatukan semuanya.

  • Tak ada satu galeri pun untuk menggabungkan siaran langsung, replay, dan klip
  • Opsi tata letak dan pemutaran video YouTube yang terbatas
  • Pengalaman menonton yang membuat pengunjung meninggalkan situs

Dengan Galeri YouTube

“Widget Elfsight benar-benar membantu menjaga kelancaran dengan pengaturan cepat dan responsif yang bisa kami sesuaikan dengan keinginan kami.”

Dumb Industries

Dumb Industries membawa Galeri YouTube Elfsight ke beranda mereka, mengubah apa yang dulu berantakan menjadi galeri pusat yang rapi. Pengunjung kini disambut dengan grid episode terbaru dan klip unggulan. Pemutaran berlangsung langsung di halaman, sehingga audiens tetap berada di situs saat menjelajah. Opsi styling memungkinkan mereka menyelaraskan galeri dengan gaya unik desain yang ada, membuatnya terasa seperti bagian dari merek, bukan tambahan yang kikuk.

YouTube Gallery used by Dumb Industries

Galeri YouTube tidak hanya merapikan tata letak, tetapi juga mengubah cara kerja video untuk kedua belah pihak. Penggemar kini memiliki cara mudah untuk menonton ulang dan menemukan acara baru, sementara tim menghemat waktu dengan membiarkan unggahan baru muncul secara otomatis. Hasilnya adalah situs web di mana video terasa sentral dan tren lalu lintas menunjukkan lebih banyak orang tetap bertahan.

Bersama widget Elfsight lainnya seperti Umpan Media Sosial, Kalender Acara, FAQ, dan Pencarian, galeri telah menjadi pusat perhatian yang menjaga audiens tetap terlibat. Grafik lalu lintas mereka membuktikan hal ini: setelah menerapkan Elfsight pada September 2024, kunjungan meningkat lebih dari 30% dibandingkan tahun sebelumnya.

Dumb Industries Visits

Mengapa Widget Anda Mungkin Tidak Berfungsi

Bahkan pengaturan terbaik pun bisa mengalami kendala sesekali. Begini cara mengatasi masalah umum widget YouTube dan menjaga galeri Anda berjalan mulus.

Mengapa video YouTube saya tidak muncul setelah disematkan?

Pastikan kode semat disalin lengkap dan ditempatkan di bagian yang benar dalam editor situs Anda. Jika situs Anda menggunakan builder visual atau tema kustom, cobalah beralih ke tampilan teks biasa atau HTML sebelum menempelkan kode. Juga, periksa bahwa video atau daftar putar bersifat publik dan tidak dibatasi atau dihapus.

Bagaimana cara membuat video YouTube yang disematkan responsif di semua perangkat?

Bungkus kode iframe dalam sebuah div kontainer dan terapkan CSS responsif. Misalnya, gunakan div dengan kelas seperti ‘responsive-container’ dan tambahkan CSS yang menetapkan lebar 100% serta padding-bottom 56.25% untuk rasio aspek 16:9. Ini memastikan video menyesuaikan ukuran dengan mulus di desktop maupun ponsel.

Apa yang harus saya lakukan jika widget video saya terlihat tidak sejajar atau rasio aspeknya tidak tepat?

Periksa kembali lebar dan tinggi iframe Anda, dan pastikan wadah di sekitar video tidak menetapkan ukuran yang saling bertentangan. Sesuaikan CSS untuk menjaga rasio aspek asli 16:9, dan uji di beberapa perangkat untuk memastikan perubahan bekerja secara konsisten.

Mengapa tidak ada yang terjadi saat saya menggunakan widget YouTube dengan URL tertentu atau daftar putar?

Hanya gunakan format URL sematan langsung (https://www.youtube.com/embed/VIDEO_ID) dalam pengaturan widget Anda. Hindari menempel URL tonton standar atau tautan yang dipersingkat. Untuk daftar putar, gunakan URL sematan dengan parameter list yang benar.

Apakah ada pengaturan peramban yang bisa membuat widget YouTube tidak berfungsi?

Ya, pemblokir konten, pengaturan privasi yang ketat, atau plugin keamanan bisa memblokir iframe dan skrip yang dibutuhkan untuk widget YouTube. Uji situs Anda di jendela peramban pribadi dengan semua ekstensi dinonaktifkan untuk mengisolasi masalah, dan pastikan Kebijakan Keamanan Konten Anda mengizinkan skrip dari domain YouTube.

Butuh bantuan? Anda tidak sendirian — di sinilah tempat menemukan sumber daya Elfsight yang terbaik, dukungan komunitas, dan saran ahli untuk setiap pengaturan.

Butuh Bantuan atau Inspirasi?

Kini Anda siap mengubah konten YouTube Anda menjadi pengalaman situs yang nyata, menjaga pengunjung tetap terlibat dan menjelajah. Tunjukkan apa yang Anda buat—kami senang melihat pengaturan kreatif dari para pengguna kami! Ikuti Elfsight di X, Facebook, dan LinkedIn untuk ide-ide baru dan berita fitur.

Artikel oleh
Spesialis Konten AI
Kristina Tyumeneva membahas topik AI di Elfsight dan Beamtrace: ia menulis tentang AI Chatbot, visibilitas LLM, dan bagaimana AI merombak pencarian serta pengalaman pelanggan—dengan pandangan praktis untuk pemilik situs web dan tim pemasaran yang membutuhkannya agar benar-benar bekerja.