AMP

amp-youtube

Ce composant affiche une vidéo YouTube.

Script requis<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
Mises en page compatiblesfill, fixed, fixed-height, flex-item, nodisplay, responsive
ExemplesExemple de code annoté pour amp-youtube

Exemple

Avec la mise en page responsive, les valeurs de largeur et de hauteur utilisées dans l'exemple ci-dessous doivent normalement générer des mises en page correctes pour les vidéos au format 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>

Attributs

autoplaySi cet attribut est utilisé et que le navigateur est compatible avec la lecture automatique :
  • Le son de la vidéo est coupé automatiquement avant le début de la lecture automatique.
  • Lorsque l'utilisateur fait défiler la page et que la vidéo n'est plus visible, la lecture est suspendue.
  • Lorsque la vidéo est de nouveau visible, la lecture reprend.
  • Lorsque l'utilisateur appuie sur la vidéo, le son est réactivé.
  • Si l'utilisateur a interagi avec la vidéo (il a, par exemple, désactivé/réactivé le son ou bien suspendu/repris la lecture) et l'a ensuite fait défiler hors ou à l'intérieur de la fenêtre d'affichage, l'état de la vidéo reste inchangé. Par exemple, si l'utilisateur met la vidéo en pause, fait défiler la page de telle sorte que la vidéo ne soit plus visible, puis revient à la vidéo, la lecture est toujours en pause.
data-videoidID vidéo YouTube figurant dans chaque URL de page de vidéo YouTube. Par exemple, dans l'URL "https://www.youtube.com/watch?v=Z1q71gFeRqM", Z1q71gFeRqM correspond à l'ID vidéo.
data-live-channelidID de chaîne YouTube qui fournit une URL de diffusion en direct stable. Par exemple, dans l'URL "https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q", UCB8Kb4pxYzsDsHxzBfnid4Q correspond à l'ID de la chaîne. Vous pouvez indiquer un attribut data-live-channelid au lieu d'un attribut data-videoid afin d'intégrer une URL stable pour une diffusion en direct plutôt qu'une vidéo. Aucun espace réservé par défaut n'est spécifié pour les chaînes. Vous pouvez en fournir un conformément à l'exemple 2 ci-dessus.
data-param-*Tous les attributs data-param-* sont ajoutés en tant que paramètre de requête à l'attribut "iframe src" de YouTube. Vous pouvez utiliser cet attribut pour transmettre des valeurs personnalisées aux plug-ins YouTube (pour indiquer si les commandes doivent être affichées ou masquées, par exemple). Les clés et valeurs sont encodées sous forme d'URI. Le format camel case est utilisé pour les clés.
  • `data-param-controls=1` devient `&controls=1`
Pour consulter les autres options disponibles pour les paramètres YouTube, rendez-vous sur la page Paramètres du lecteur.
dockNécessite l'extension amp-video-docking. Si cet attribut est utilisé et que la vidéo est lue manuellement, cette dernière est" "réduite" et ancrée à un coin ou à un élément de la page lorsque l'utilisateur fait défiler la page au-delà de la zone visuelle du composant vidéo. Pour en savoir plus, consultez la documentation relative à l'extension d'ancrage.
credentials (facultatif)Définit une option credentials telle qu'elle est spécifiée par l'API Fetch.
  • Valeurs acceptées : `omit`, `include`
  • Valeur par défaut : `include`
Si vous souhaitez utiliser le lecteur YouTube en mode de confidentialité avancé, transmettez la valeur omit. En général, YouTube définit ses cookies lorsque le lecteur est chargé. En mode de confidentialité avancé, les cookies sont définis lorsque l'internaute a cliqué sur le lecteur.
common attributesCet élément inclut des attributs communs étendus aux composants AMP.

Validation

Consultez les règles relatives à amp-youtube dans les spécifications du validateur AMP.

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