1178 sujets

Accessibilité du Web

[Résolu] Youtube video embed accessible au clavier

Bonjour,
comme le dit le titre j'ai intégré une vidéo YouTube sur le site de mon client (vidéo donné par le client) or lors de l'intégration de la vidéo sur le site celle si n'est pas accessible via tab pour lancé la vidéo si quelqu'un peut me dire comment faire ou une doc sur le sujet je suis preneur
voici le lien de la page ou se trouve la vidéo www.kultive.fr/cultiver-la-proximite-producteurs-locaux-france/
Bonne journée à vous.
Modérateur
Bonjour,

La vidéo est actuellement intégrée par un épouvantable mécanisme que je suppose être du code javascript, code noyé au milieu de centaines de milliers d'autres lignes de code comme le sait si bien faire Wordpress.

Une manière simple d'intégrer une vidéo youtube est la suivante :

1) On récupère le code youtube de la vidéo (c'est dans le code wordpress, c'est aussi dans l'url de la page du site youtube qui affiche cette vidéo. Le code pour cette vidéo est, sauf erreur possible de ma part, "T-J8VcMSXiA". Si c'est un autre code, il suffit de le remplacer dans le code ci-dessous.

2) À l'endroit où l'on souhaite afficher la vidéo, on insère le html suivant (mettre éventuellement un titre plus approprié à la place de "Film Kultive")
<div class="video-16-9"><div>
<iframe src="https://www.youtube.com/embed/T-J8VcMSXiA"
		title="Film Kultive"
		frameborder="0"
		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
		allowfullscreen></iframe>
</div></div>


3) On ajoute dans le css
.video-16-9 div
{
	position:relative;
	padding-bottom:56.25%;
}
.video-16-9 div iframe
{
	position:absolute;
	width:100%;
	height:100%;
}


4) on complète éventuellement les styles ci-dessus par toute instruction souhaitée pour une intégration harmonieuse dans la page (genre des margins, des paddings, max-width, etc.)

Amicalement,
Sujet clos
Aller à