AMP
ID
English Français العربية Español Italiano 日本語 한국어 Português Русский Türkçe 中文

amp-youtube

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?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub