Table des matières

amp-youtube

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

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>

Supported Layouts

fill fixed fixed-height flex-item nodisplay responsive

Exemples

Product Page amp-addthis amp-youtube Integrating Videos in AMP an Overview Video Carousels with amp-carousel

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

amp-youtube 1.0 0.1