icon logo wibloog.comWibloog
  • Teknologi
  • Otomotif
    Motor
    Mobil
  • Gadget
    Smartphone
    Apps
  • Tips dan Ulasan
  • Olah Raga
  • Fashion
  • Pendidikan
  • Kuliner
  1. Home
  2. Informasi Tentang Teknologi dan Komputer

  3. Tutorial

Cara Membuat Embed Video Player Youtube di Website atau Blog
  • 10 September 2020
  • 641
  • Admin@Wibloog
  • Picture by : #

Cara Membuat Embed Video Player Youtube di Website atau Blog

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 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 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 Terbaru

Alternatif Pasang Internet untuk Rumahan
Teknologi dan Komputer 06 Maret 2021
Apakah Jumlah Kata Mempengaruhi Faktor Kualitas Blog
Tips dan Ulasan 05 Maret 2021
Tantangan Berat Jadi seorang Blogger
Tips dan Ulasan 01 Maret 2021
Cara Membuat Pencarian Multiple Keyword di PHP Mysql
Teknologi dan Komputer 27 Februari 2021
Cari tahu Dari Mana Penghasilan Seorang Blogger
Tips dan Ulasan 26 Februari 2021
Realita Bersepeda di Jalan Perkotaan
Olahraga 22 Februari 2021
Realita Jadi Seorang Programmer
Teknologi dan Komputer 20 Februari 2021
Cara Beli Tiket Kereta Api di Bukalapak
Tips dan Ulasan 16 Februari 2021
7 Kelebihan iPhone Dibanding Ponsel Android
Gadget 14 Februari 2021

Komentar

Tinggalkan Komentar Disini


Artikel Terkait

Alternatif Pasang Internet untuk Rumahan
Alternatif Pasang Internet untuk Rumahan
Cara Membuat Pencarian Multiple Keyword di PHP Mysql
Cara Membuat Pencarian Multiple Keyword di PHP Mysql
Realita Jadi Seorang Programmer
Realita Jadi Seorang Programmer
Iklan Web Hosting Dewaweb Lucu
Iklan Web Hosting Dewaweb Lucu
Blog Tanpa SEO Apakah Bisa Page One Google?
Blog Tanpa SEO Apakah Bisa Page One Google?
Cara Logout Gmail Dari Device yang Pernah Digunakan
Cara Logout Gmail Dari Device yang Pernah Digunakan
Kenapa Saya Pilih Linux, Berikut ini Ulasannya
Kenapa Saya Pilih Linux, Berikut ini Ulasannya
Alasan Kenapa Banyak Orang Pakai Blogspot Untuk Cari Uang di Internet
Alasan Kenapa Banyak Orang Pakai Blogspot Untuk Cari Uang di Internet
Kenapa Backup Data Server itu Penting, Berikut ini Ulasannya
Kenapa Backup Data Server itu Penting, Berikut ini Ulasannya
Tribunnews Selalu Menduduki Halaman satu Google, Bagaimana Bisa?
Tribunnews Selalu Menduduki Halaman satu Google, Bagaimana Bisa?
Rekomendasi Macbook Bekas Tahun 2021 dengan Budget Minim
Rekomendasi Macbook Bekas Tahun 2021 dengan Budget Minim
Cara Buat Daftar Pustaka Otomatis Pakai Mendeley
Cara Buat Daftar Pustaka Otomatis Pakai Mendeley
Cara Mudah Verifikasi Domain Google Search Console Hosting Cpanel
Cara Mudah Verifikasi Domain Google Search Console Hosting Cpanel
Perkembangan Google dan Logo dari Generasi Pertama Hingga Sekarang
Perkembangan Google dan Logo dari Generasi Pertama Hingga Sekarang
10 Tips Penting SEO Gambar Yang Perlu Anda Ketahui
10 Tips Penting SEO Gambar Yang Perlu Anda Ketahui

Jasa Buat Blog

Tentang Kami

Wibloog adalah portal informasi yang memuat sebuah artikel yang mengulas tentang perangkat komputer, gadget, teknologi, motor, mobil, fashion, pendidikan, kuliner

Lebih Lanjut ...

Informasi Situs

Kontak
Disclaimer
Sitemap
Jasa Buat Blog
Facebook
DMCA.com Protection Status wibloog.com

© 2019 Wibloog. All Rights Reserved