Tutorial Embed Video Youtube pada website

Untuk embed/menyematkan suatu video dari youtube di blog atau website gimna caranya ya?mungkin itu pertanyaan yang sederhana tetapi tidak semua orang menyadari bahwa menautkan video dari youtube sangat mudah. Pada kali ini saya ingin berbagi tentang bagaimana cara embed/menautkan video dari youtube ke web atau ke blog. Video merupakan salah satu konten yang menarik jika diterapkan dalam suatu situs maupun blog, terutama sekarang semua dengan mudah dapat mengakses video dari youtube. Untuk cara embed video Youtube di blog atau website bisa simak berikut ini:

Baca juga:

Bingung cara membuat video ? 6 langkah mudah membuat video dengan Microsoft Powerpoint 2010

Langkah pertama : Membuat Template HTML untuk embed video

Pada kasus ini saya akan mencoba embed video dari youtube ke website. Sebelum kita embed menempatkan video terlebih dahulu kita siapkan template HTML sebagai demo untuk menampilkan video tersebut kedalam website. Untuk Template bisa temen-temen buat dari bootstrap maupun css, berikut ini contoh template HTML untuk menampilkan video kedalam Website:

<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Cara Menyematkan Video YouTube</title>
   <style>
       .container {
           width: 560px;
           margin: auto;
           background: #999999;
       }
       footer {
           padding: 5px 10px;
           background-color: #1CBABC;
           color: #F4F5ED;
           text-align: center;
       }
   </style>
</head>
<body>
   <div class="container">
       <div class="content-video">
           

       </div>
       <footer>
           <h3> Cara Menyematkan Video YouTube </h3>
       </footer>
   </div>
</body>
</html>

Baca juga:

Begini tantangan Pengembangan Talenta di era ekonomi digital

Jika temen-temen sudah punya blog atau website dan mau posting dengan video anda bisa langsung klik source code untuk memasukkan url dari youtube nya

Gambar 1. Tampilan isi konten dalam mode source code

Langkah kedua: Klik menu bagikan

Setelah selesai membuat template tersebut langkah berikutnya yaitu silahkan buka youtube dengan url https://www.youtube.com/ dan pilih video youtube yang nantinya akan kita terapkan pada template yang telah kita buat.

Gambar 2. Tampilan video yang akan dipilih untuk dibagikan

Setelah itu klik share dibagian kanan bawah video, untuk lebih jelas bisa lihat pada gambar berikut ini.

Gambar 3. Tampilan Video yang sudah dipilih danklik tombol bagikan

Baca juga:

Tantangan Implementasi dan pengembangan Transformasi Digital untuk 5G oleh KOMINFO

Langkah ketiga: Pilih media yang akan kita sematkan

Setelah itu, akan muncul pop up yang diharuskan kita memilih, karena kita akan menerapkan pada halaman webiste kita, maka kita pilih Embed

Gambar 4. Pop Up media yang bisa dibagikan

Apa saja media yang bisa kita sematkan? Bisa lihat gambar berikut ini. Dalam kasus ini kita kan menyematkan video kedalam situs maka pada popo up kita pilih sematkan maka akan tampil pada gambar berikut ini.

Gambar 6. Media yang didukung Youtube untuk membagikan video

Gambar 7. Media yang didukung Youtube untuk membagikan video

Gambar 8. Media yang didukung Youtube untuk membagikan video

Gambar 5. Source Code yang dipilih untuk menyematkan Video di situs

Setelah itu copy sintaks yang diberikan seperti berikut ini:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Cara Embed Video YouTube di Website</title>
   <style>
       .container {
           width: 560px;
           margin: auto;
           background: #999999;
       }
       footer {
           padding: 5px 10px;
           background-color: #1CBABC;
           color: #F4F5ED;
           text-align: center;
       }
   </style>
</head>
<body>
   <div class="container">
       <div class="content-video">
           <iframe width="560" height="315" src="https://www.youtube.com/embed/U_8_p5CFfSU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

       </div>
       <footer>
           <h3>Cara Embed Video YouTube di Website</h3>
       </footer>
   </div>
</body>
</html>

Atau gambar berikut ini:

Gambar 9. Tampilan penempatan source code pada situs

Untuk tampilan tersebut bisa dilihat pada gambar berikut ini:

Gambar 10. Hasil tampilan ketika video youtube sudah disematkan pada situs

Demikian cara menyematkan/embed video pada halaman website,

semoga bermanfaat.

INFORMASI:

Iklan yang tampil pada halaman situs ini sepenuhnya diatur oleh pihak google, kami hanya menyediakan slot kosong. Jadi apabila ada iklan yang kurang berkenan atau menyinggung perasaan anda harap informasikan kepada kami melalui formulir kontak web ini untuk selanjutnya akan kami sampaikan ke pihak Google.