AMP

amp-youtube

 
You can now use this component outside valid AMP documents using the experimental Bento version of this component. Learn more in our Bento guide.

Description

Mostra un video di YouTube.

 

Required Scripts

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

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 supportati fill, fixed, fixed-height, flex-item, nodisplay, responsive
Esempi Esempio 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

autoplay Se 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-videoid L'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-channelid L'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.
dock Richiede 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 attributes Questo elemento include attributi comuni estesi ai componenti AMP.

Convalida

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

Ti servono altre informazioni?

Hai letto questo documento decine di volte ma non risponde a tutte le tue domande? Forse ci sono altre persone col tuo stesso problema: entra in contatto con loro su Stack Overflow.

Vai a Stack Overflow
Hai trovato un bug o una funzione mancante?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Vai a GitHub