Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

amp-youtube

Description

Afficher une vidéo YouTube.

Required Scripts

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

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 compatibles fill, fixed, fixed-height, flex-item, nodisplay, responsive
Exemples Exemple 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

autoplay Si 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-videoid ID 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-channelid ID 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 &amp;controls=1
Pour consulter les autres options disponibles pour les paramètres YouTube, rendez-vous sur la page Paramètres du lecteur.
dock Né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 attributes Cet é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.

Besoin d'une aide supplémentaire ?

Vous avez lu ce document une douzaine de fois mais il ne répond pas à toutes vos questions ? D'autres personnes ont peut-être eu le même sentiment. Contactez-les sur Stack Overflow.

Se rendre sur Stack Overflow
Vous avez trouvé un bug ou une fonctionnalité manquante ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Se rendre sur GitHub