Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
ID
English Deutsch Français العربية Español Italiano 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-youtube

Description

Displays a YouTube video.

Required Scripts

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Supported Layouts

Menampilkan video YouTube.

Skrip yang Diperlukan <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
Tata Letak yang Didukung fill, fixed, fixed-height, flex-item, nodisplay, responsive
Contoh Contoh kode yang dianotasi untuk amp-youtube

Contoh

Dengan tata letak responsive, lebar dan tinggi dari contoh berikut akan menghasilkan tata letak yang benar untuk video dengan rasio tinggi lebar 16:9:

<amp-youtube
    data-videoid="mGENRKrdoGY"
    layout="responsive"
    width="480" height="270"></amp-youtube>


  <amp-youtube
      id="myLiveChannel"
      data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
      width="358"
      height="204"
      layout="responsive">
    <amp-img
      src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
      placeholder
      layout="fill"
      />
  </amp-youtube>

Atribut

autoplay Jika atribut ini ada, dan browser mendukung fitur autoplay:
  • audio video otomatis dinonaktifkan sebelum autoplay dimulai
  • saat di-scroll keluar dari tampilan, video akan dijeda
  • saat di-scroll ke dalam tampilan, video akan melanjutkan pemutaran
  • saat pengguna menge-tap video, audio video akan diaktifkan
  • jika pengguna telah berinteraksi dengan video (misalnya menonaktifkan/mengaktifkan audio, menjeda/melanjutkan, dll.), dan video di-scroll ke dalam atau keluar dari tampilan, status video tetap sama seperti saat terakhir pengguna meninggalkannya. Misalnya, jika pengguna menjeda video, kemudian men-scroll video keluar dari tampilan lalu kembali ke video, video tersebut tetap dijeda.
data-videoid ID video YouTube yang ada di setiap URL halaman video YouTube. Misalnya, dalam URL ini: https://www.youtube.com/watch?v=Z1q71gFeRqM, ID video adalah Z1q71gFeRqM.
data-live-channelid ID channel YouTube yang memberikan url livestream stabil. Misalnya, dalam URL ini: https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q, ID channel adalah UCB8Kb4pxYzsDsHxzBfnid4Q. Anda dapat menyediakan atribut data-live-channelid, bukan data-videoid, untuk menyematkan URL stabil untuk sebuah live stream, bukan video. Channel tidak dilengkapi dengan placeholder default. Anda dapat menyediakan placeholder untuk video sesuai contoh 2 di atas.
data-param- Semua atribut data-param- akan ditambahkan sebagai parameter kueri ke iframe src YouTube. Ini dapat digunakan untuk meneruskan nilai kustom ke plugin YouTube, misalnya, apakah kontrol akan ditampilkan atau tidak. Kunci dan nilai akan dienkode URI. Kunci akan berbentuk camel case.
  • data-param-controls=1 menjadi &amp;controls=1
Lihat Parameter Pemutar Tersemat YouTube untuk opsi parameter lainnya untuk YouTube.
dock Memerlukan ekstensi amp-video-docking. Jika atribut ini ada dan video sedang diputar secara manual, video akan "diminimalkan" dan dikunci ke suatu sudut atau elemen saat pengguna men-scroll keluar dari area visual komponen video. Untuk detail lebih lanjut, lihat dokumentasi tentang ekstensi docking.
credentials (opsional) Menentukan opsi credentials seperti yang ditentukan oleh Fetch API.
  • Nilai yang didukung: omit,include
  • Default: include
Jika Anda ingin menggunakan pemutar YouTube dalam mode privasi yang ditingkatkan, masukkan nilai omit. Biasanya YouTube menyetel cookie-nya saat pemutar dimuat. Dalam mode privasi yang ditingkatkan, cookie disetel setelah pengguna mengklik pemutar.
atribut umum Elemen ini mencakup atribut umum yang diperluas ke komponen AMP.

Validasi

Lihat aturan amp-youtube dalam spesifikasi validator AMP.

Perlu bantuan lainnya?

Anda telah membaca dokumen ini belasan kali, tetapi belum semua pertanyaan Anda terjawab? Mungkin orang lain merasakan hal yang sama. Berinteraksilah dengan mereka di Stack Overflow.

Kunjungi Stack Overflow
Menemukan bug atau ada fitur yang kurang?

Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.

Kunjungi GitHub