Cara Membuat Embed Video Player Youtube di Website atau Blog

Cara Membuat Embed Video Player Youtube di Website atau Blog
Picture by : #
10 September 2020 » Post by : Admin@Wibloog
Jual Komputer & Aksesoris, Harga Murah

Jual Komputer & Aksesoris, Harga Murah
Dapatkan Perangkat Komputer, Laptop, PC Lengkap dengan Aksesoris Bergaransi

Haloo sobat, kali ini penulis akan berbagi cara membuat video player menggunakan youtube, bila Anda ingin memutar video youtube dihalaman website atau blogger, Google telah menyediakan video embed youtube yang dapat digunakan secara gratis.

Video embed youtube hanya dapat diputar secara online, dengan menyunting url ID video youtube yang di share.

Embed youtube player kali ini menggunakan 2 komponen html, yaitu menggunakan iframe dan div dengan bantuan javascript.

Langsung saja ke topik Cara Membuat Embed Video Player Youtube di Website atau Blog dibawah ini.

iframe Embed Youtube


Cara pertama kita menggunakan iframe, trik ini sangat mudah digunakan, hanya dengan satu atau dua baris kode html sudah bisa membuat embed video youtube.

Pada bagian iframe tepatnya tag sumber yaitu data-src, kita masukan ID url youtube, berikut ini link yang diambil dari website youtube.

https://www.youtube.com/watch?v=we2-rkL78u4&t=4s

Setelah link url diatas kita dapatkan, kemudian kita masukan ke dalam source atau data-src pada iframe menjadi seperti dibawah ini.

https://www.youtube.com/embed/we2-rkL78u4?autoplay=1&origin=wibloog.com

ID video we2-rkL78u4 ini yang kita masukan kedalam source embed, tidak semua video youtube dapat digunakan di embed, karena berkaitan dengan izin privacy dan copyright pemilik video.

id url video youtube

style="width: 450px;height: 340px;"

Kode tag diatas adalah ukuran lebar dan tinggi dari iframe yang di gunakan, untuk hasilya seperti dibawah ini.

Hasil Embed Youtube iframe

div Embed Youtube Javascript


Cara yang kedua adalah menggunakan div, dengan bantuan menggunakan javascript, dimana source code didapat dari google, yang dapat digunakan secara bebas.

Berikut dibawah ini code yang di share oleh Google Youtube

ID video youtube terleteak pada baris bagian javascript, kali ini mengambil video youtube yang berbeda, lebih jelasnya seperti dibawah ini.

     function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'c5qo7l96K4I',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }


videoId: 'c5qo7l96K4I',

videoId merupakan baris dimana diletakan ID url video youtube yang akan di tayangkan, berikut ini id yang diambil c5qo7l96K4I dari url website youtube dibawah ini.

https://www.youtube.com/watch?v=c5qo7l96K4I&feature=emb_title

Untuk pengaturan lebar dan tinggi, bisa Anda ubah pada bagian baris height dan width, dan hasilnya bisa dilihat seperti dibawah ini.

Embed Youtube Javascript




Artikel Terkait
Pengaruh Tampilan Website Terhadap Bisnis Online Anda
Membangun Blog Lebih Dari Satu, Efektifkah?
Tips Cara Menaikkan Trafik Blog bagi Pemula
Masalah Sitemap.xml Forbidden Access Error 403
Distro Linux yang Mirip Mac OS
Google Chrome : Update Keamanan Penggunaan Password Login di Browser
Pentingnya Password dan Touch ID untuk Keamanan di Ponsel Anda
Pilih Mana Server Linux atau Windows Untuk Usaha UMKM Retail Anda
Cara Cek Performa dan SEO Blog Anda
Pengaruh Perubahan Algoritma Google terhadap Blog dan Website

Ada 0 Komentar di "Cara Membuat Embed Video Player Youtube di Website atau Blog"


Tinggalkan Komentar Disini