AMP

amp-youtube

Bir YouTube videosu görüntüler.

Zorunlu Komut Dosyası<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
Desteklenen Düzenlerfill, fixed, fixed-height, flex-item, nodisplay, responsive
Örnekleramp-youtube için ek açıklamalı kod örneği

[İçindekiler]

Örnek

Duyarlı düzenle, örnekteki genişlik ve yükseklik, 16:9 en boy oranlı videolar için doğru düzenler sağlamalıdır:

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

Özellikler

autoplayBu özellik mevcutsa ve tarayıcı otomatik oynatmayı destekliyorsa:
  • otomatik oynatma başlamadan önce videonun sesi otomatik olarak kapatılır
  • video görünüm alanının dışında kaldığında video duraklatılır
  • video görünüm alanına tekrar girdiğinde video oynatılmaya devam eder
  • kullanıcı videoya dokunduğunda videonun sesi açılır
  • kullanıcı videoyla etkileşime geçtiyse (ör. sesi kapatma/açma, duraklatma/devam ettirme vb.) ve video görünüm alanının dışında kaldıysa veya görünüm alanına girdiyse videonun durumu, kullanıcının bıraktığı şekilde kalır. Örneğin, kullanıcı videoyu duraklattıktan sonra videoyu görünüm alanının dışına çıkarır ve ardından, videoya geri dönerse video duraklatılmış olarak kalır.
data-videoidYouTube video kimliği, her YouTube video sayfası URL'sinde bulunur. Örneğin, https://www.youtube.com/watch?v=Z1q71gFeRqM URL'sinde Z1q71gFeRqM kısmı, video kimliğidir.
data-live-channelidSabit bir canlı yayın url'si sağlayan YouTube kanal kimliği. Örneğin, https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q URL'sinde UCB8Kb4pxYzsDsHxzBfnid4Q kısmı, kanal kimliğidir. Bir video yerine canlı yayın için sabit bir url yerleştirmek isterseniz data-videoid özelliği yerine bir data-live-channelid özelliği sağlayabilirsiniz. Kanallar, varsayılan yer tutucularla birlikte sağlanmaz. Video için yukarıdaki 2. örnekte olduğu gibi bir yer tutucu sağlayabilirsiniz.
data-param-*Tüm data-param-* özellikleri, YouTube iframe src'ye sorgu parametresi olarak eklenir. Bu, kontrollerin gösterilip gösterilmeyeceği gibi özel değerlerin YouTube eklentilerine geçirilmesi için kullanılabilir. Anahtarlar ve değerler URI kodlu olur. Anahtarlarda büyük/küçük harf karışık kullanılır.
  • `data-param-controls=1`, `&controls=1` olur
YouTube ile ilgili daha fazla parametre seçeneği için YouTube Yerleşik Oynatıcı Parametreleri konusuna bakın.
dockamp-video-docking uzantısını gerektirir. Bu özellik mevcutsa ve video manuel olarak oynatılıyorsa kullanıcı, video bileşeninin görsel alanını görünüm alanının dışına kaydırdığında video “küçültülür” ve bir köşeye veya bir öğeye sabitlenir. Daha ayrıntılı bilgi için yuvaya yerleştirme uzantısının kendisiyle ilgili dokümanlara bakın.
credentials (isteğe bağlı)Getirme API'si tarafından belirtildiği şekliyle bir credentials seçeneğini tanımlar.
  • Desteklenen değerler: `omit`, `include`
  • Varsayılan: `include`
YouTube oynatıcısının gelişmiş gizlilik modunda kullanmak istiyorsanız omit değerini geçirin. YouTube genellikle çerezlerini oynatıcı yüklenirken ayarlar. Gelişmiş gizlilik modunda çerezler, kullanıcı oynatıcıyı tıkladığında ayarlanır.
common attributesBu öğe, AMP bileşenlerine genişletilmiş ortak özellikleri içerir.

Doğrulama

AMP doğrulayıcı spesifikasyonundaki amp-youtube kurallarına bakın.

Need more help?

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