Cara Embed Video Youtube Short di HTML untuk Website ataupun Blog

Daftar Isi

YouTube Shorts adalah format video singkat yang sangat populer untuk berbagi konten menarik. Kalau kamu ingin menampilkan video Shorts di website kamu, kamu bisa menggunakan HTML untuk melakukan embed. Berikut adalah langkah-langkah mudah yang bisa kamu ikuti.

Apa Itu Embed Video YouTube?

Embed adalah cara untuk menampilkan video dari YouTube langsung di halaman website kamu. Dengan menggunakan kode HTML, kamu bisa membuat pengunjung website menonton video tanpa harus meninggalkan situs kamu.

Langkah-Langkah Embed Video YouTube Shorts

1. Temukan URL Video YouTube Shorts

   Dapatkan URL video YouTube Shorts yang ingin kamu embed, biasanya berupa https://youtube.com/shorts/{video-ID}

2. Gunakan Kode Embed

   Kamu bisa menggunakan kode embed berikut untuk menampilkan video Shorts:

   <iframe 
       width="320" 
       height="560" 
       src="https://www.youtube.com/embed/{video-ID}" 
       frameborder="0" 
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
       allowfullscreen>
   </iframe>
               

   Ganti {video-ID} dengan ID unik dari video kamu.

3. Masukkan Kode Embed ke File HTML

   Edit file HTML di website kamu dengan mode Code atau HTML view, dan letakkan kode embed di bagian yang kamu inginkan.

4. Simpan dan Uji Hasilnya

   Setelah menambahkan kode embed, simpan file HTML kamu dan lihat hasilnya di browser.

Coba cek tampilannya di HP, kalau ngak bagus coba pakai CSS ini

<div class="responsive-video">
  <iframe 
    src="https://www.youtube.com/embed/{video-ID}" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
  </iframe>
</div>

<style>
  .responsive-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Rasio aspek 16:9 */
    height: 0;
    overflow: hidden;
  }

  .responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

Tips Embed Video YouTube Shorts

• Sesuaikan ukuran video agar sesuai dengan desain website kamu.
• Gunakan CSS untuk membuat iframe responsif. Contoh:

  iframe {
      width: 100%;
      height: auto;
  }
              

• Untuk membuat video melayang dikiri seperti koran maka bisa menggunakan

  <div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">..iframe..</div> 

• Pilih video Shorts yang relevan dengan konten website kamu.
• Supaya preview pada artikel menampilkan gambar maka bisa gunakan kode ini (Sisipkan gambar thumbnail video secara manual menggunakan URL berikut:)

  <img src="https://img.youtube.com/vi/VIDEOID/hqdefault.jpg" style="display:none;" alt="YouTube thumbnail" />

  Ganti VIDEO_ID dengan ID dari video YouTube yang kamu embed.

Kesimpulan

Menggunakan HTML untuk embed video YouTube Shorts adalah cara sederhana dan efektif untuk meningkatkan daya tarik website kamu. Dengan langkah-langkah di atas, kamu bisa menambahkan video singkat yang menarik langsung dari YouTube. Selamat mencoba!