AMP

amp-youtube

Mostra un video di YouTube.

Script obbligatorio<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
Layout supportatifill, fixed, fixed-height, flex-item, nodisplay, responsive
EsempiEsempio di codice annotato per amp-youtube

Esempio

Grazie al layout adattabile, la larghezza e l'altezza dell'esempio dovrebbero produrre layout corretti per i video con proporzioni 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>

Attributi

autoplaySe questo attributo è presente e il browser supporta la riproduzione automatica:
  • L'audio del video viene automaticamente disattivato prima che la riproduzione automatica abbia inizio
  • Quando l'utente scorre fino a non visualizzare più il video, questo viene messo in pausa
  • Quando l'utente scorre fino a visualizzare il video, la riproduzione di questo riprende
  • Quando l'utente tocca il video, l'audio viene riattivato
  • Se l'utente ha interagito con il video (ad esempio, attivando o disattivando l'audio, mettendo in pausa o riprendendo il video e così via) e l'utente scorre per attivare/disattivare la visualizzazione del video, lo stato del video rimane come l'aveva lasciato l'utente. Ad esempio, se l'utente mette in pausa il video, lo fa scorrere fino a che questo non è più visualizzato e infine torna al video, questo sarà ancora in pausa.
data-videoidL'ID video di YouTube presente nell'URL della pagina di un qualsiasi video di YouTube. Ad esempio, nell'URL https://www.youtube.com/watch?v=Z1q71gFeRqM, Z1q71gFeRqM è l'ID video.
data-live-channelidL'ID canale YouTube che fornisce un URL di live streaming stabile. Ad esempio, nell'URL https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q, UCB8Kb4pxYzsDsHxzBfnid4Q è l'ID canale. Puoi fornire un attributo data-live-channelid anziché data-videoid per incorporare un URL stabile per un live streaming anziché un video. I canali non dispongono di segnaposti predefiniti. Puoi fornire un segnaposto per il video come nell'esempio 2 precedente.
data-param-*Tutti gli attributi data-param-* saranno aggiunti come parametri di ricerca all'src iframe di YouTube. Può essere usato per trasferire valori personalizzati ai plugin di YouTube, ad esempio per mostrare o meno i controlli. Le chiavi e i valori utilizzeranno la codifica URI. Le chiavi utilizzeranno la notazione a cammello.
  • `data-param-controls=1` diventa `&controls=1`
Consulta l'articolo relativo ai parametri del player di YouTube incorporato per ulteriori opzioni per i parametri di YouTube.
dockRichiede l'estensione amp-video-docking. Se questo attributo è presente e il video viene riprodotto manualmente, il video viene "ridotto a icona" e fissato a un angolo o un elemento quando l'utente scorre all'esterno dell'area di visualizzazione del componente video. Per ulteriori informazioni, consulta la documentazione relativa all'estensione amp-video-docking.
credentials (facoltativo)Definisce un'opzione credentials come specificato dall'API Fetch.
  • Valori supportati: `omit`, `include`
  • Impostazione predefinita: `include`
Se vuoi utilizzare il player di YouTube in una modalità di privacy ottimizzata, trasmetti il valore di omit. In genere YouTube imposta i cookie quando viene caricato il player. Nella modalità di privacy ottimizzata, i cookie vengono impostati quando l'utente fa clic sul player.
common attributesQuesto elemento include attributi comuni estesi ai componenti AMP.

Convalida

Consulta le regole amp-youtube nella specifica dello strumento di convalida AMP.

Serve ancora aiuto?

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