Video youtube dans la description

[P i l o u]

Bonjour,

Dans la description de certains articles, j'ajoute une video de youtube via un iframe.

Je recopie donc le code fourni par youtube dans le code de la description de l'article.

Exemple:

<p><iframe width="400" height="225" src="https://www.youtube.com/embed/1x_gnjxB3UA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen"></iframe></p>

Aucun soucis sur desktop mais sur mobile, la video est plus large que l'écran, donc, je reçois des messages de GSC: contenu plus large que l'écran.

 

Eolia m'a conseillé (et je le remercie bien), de créer un video-container.
J'ai donc crée un fichier custom.css dans le dossier css de mon thème:

.video-container {
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

Et j'ai modifié le code youtube comme suit:

<div class="video-container"><iframe width="100%" height="auto" src="https://www.youtube.com/embed/1x_gnjxB3UA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay" allowfullscreen="allowfullscreen"></iframe></div>

Sur desktop, aucun soucis d'affichage mais sur mobile, la video est très petite..

Tout aide sera la bienvenue !

[Eolia]

Pourquoi avoir modifié les largeurs et hauteurs de l'iframe ??? Laissez celles d'origine.

[P i l o u]

Alors, j'ai la même chose qu'avant, le contenu dépasse la largeur de l'écran

[Eolia]

Ben chez moi c'est ok avec le bon css

et en vue pc:

[P i l o u]

Tu es sur mon site de prod là, non ?

[Eolia]

Oui