BHDicaire

Vidéo intégrée

Contenu

La vidéo intégrée se présente d’abord comme une vignette locale munie d’un bouton de lecture. Elle crée l’iframe distante seulement lorsque la personne active ce bouton, ce qui évite les requêtes et les scripts du lecteur au chargement initial.

Exemple#

Un lecteur YouTube différé qui utilise une vignette locale

Quand l’utiliser#

  • Utilisez une intégration lorsque la vidéo est au cœur de la page, et non une référence d’appoint
  • Préférez un lien externe lorsqu’un titre et une destination suffisent
  • Ne publiez pas une vidéo intégrée sans sous-titres; pointez plutôt vers une source sous-titrée

Implémentation#

{{ partial "video-embed.html" (dict
  "title" "Démonstration du lecteur YouTube intégré"
  "embedURL" "https://www.youtube-nocookie.com/embed/M7lc1UVf-VE?autoplay=1&rel=0"
  "watchURL" "https://www.youtube.com/watch?v=M7lc1UVf-VE"
  "thumbnail" "/images/home/ben-speaking-les-affaires-2020.jpg"
  "thumbnailAlt" "Benoît H. Dicaire sur scène pendant une conférence"
  "caption" "Un lecteur YouTube différé qui utilise une vignette locale"
) }}

Le partiel valide les deux URL distantes en HTTPS et ne rend aucune iframe au départ. À l’activation, le JavaScript ciblé remplace le bouton par une iframe titrée, autorise les fonctions du lecteur et y déplace le focus. Les pages Markdown utilisent le shortcode de vidéo intégrée, qui valide l’identifiant YouTube et construit les URL.

Options#

OptionRôle
titleTitre obligatoire de la vidéo utilisé pour le bouton et l’iframe
embedURLURL HTTPS obligatoire du lecteur, chargée seulement après activation
watchURLURL HTTPS de repli obligatoire affichée sans JavaScript
thumbnailChemin obligatoire de la vignette locale
thumbnailAltTexte de remplacement obligatoire de la vignette
captionLégende visible facultative

Manifeste d’interface

Nature
Composant
Catégorie
Contenu
Statut
Implémenté
Implémentation
Partial:layouts/partials/video-embed.htmlShortcode:layouts/shortcodes/video-embed.htmlCSS:assets/css/site.cssJavaScript:assets/js/site.jsi18n:videoEmbedPlayvideoEmbedWatch
Interfaces liées
Vidéo intégrée

Accessibilité#

  • La vignette se trouve dans un bouton natif, donc Tab l’atteint et Entrée ou Espace l’active
  • Le nom accessible du bouton et le title de l’iframe créée identifient tous deux la vidéo
  • Le focus se déplace dans l’iframe après l’activation; la vignette locale quitte le document lorsque le bouton est remplacé
  • Les sous-titres sont une exigence de publication que le composant ne peut pas vérifier; confirmez-les à la source avant l’intégration

Vie privée et performance#

  • Le composant initial ne charge que la vignette locale
  • Le lecteur distant est demandé après une activation explicite
  • Le shortcode YouTube emploie l’hôte d’intégration youtube-nocookie.com