YouTube Player API Reference for iframe Embeds

IFrame player API memungkinkan Anda menyematkan pemutar video YouTube di situs dan mengontrol pemutar menggunakan JavaScript.

Dengan menggunakan fungsi JavaScript API, Anda dapat mengantrekan video untuk diputar; memutar, menjeda, atau menghentikan video tersebut; menyesuaikan volume pemutar; atau mengambil informasi tentang video yang sedang diputar. Anda juga dapat menambahkan pemroses peristiwa yang akan dieksekusi sebagai respons terhadap peristiwa pemutar tertentu, seperti perubahan status pemutar.

Panduan ini menjelaskan cara menggunakan IFrame API. Panduan ini mengidentifikasi berbagai jenis peristiwa yang dapat dikirim API dan menjelaskan cara menulis pemroses peristiwa untuk merespons peristiwa tersebut. Bagian ini juga menjelaskan berbagai fungsi JavaScript yang dapat Anda panggil untuk mengontrol pemutar video serta parameter pemutar yang dapat Anda gunakan untuk menyesuaikan pemutar lebih lanjut.

Persyaratan

Browser pengguna harus mendukung fitur postMessage HTML5. Sebagian besar browser modern mendukung postMessage.

Pemutar tersemat harus memiliki area pandang minimal 200x200 piksel. Jika pemutar menampilkan kontrol, pemutar harus cukup besar untuk menampilkan kontrol sepenuhnya tanpa memperkecil area pandang di bawah ukuran minimum. Sebaiknya pemutar 16:9 memiliki lebar minimal 480 piksel dan tinggi 270 piksel.

Setiap halaman web yang menggunakan IFrame API juga harus menerapkan fungsi JavaScript berikut:

  • onYouTubeIframeAPIReady – API akan memanggil fungsi ini saat halaman selesai mendownload JavaScript untuk API pemutar, yang memungkinkan Anda menggunakan API di halaman. Dengan demikian, fungsi ini dapat membuat objek pemain yang ingin Anda tampilkan saat halaman dimuat.

Memulai

Contoh halaman HTML di bawah membuat pemutar tersemat yang akan memuat video, memutarnya selama enam detik, lalu menghentikan pemutaran. Komentar bernomor dalam HTML dijelaskan dalam daftar di bawah contoh.

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: