— Publié le 19 octobre 2019 —
Vous avez intégré une vidéo YouTube dans votre site mais lorsque vous testez votre site sur mobile, la vidéo déborde de l’écran et vous ne pouvez pas la voir en entier. C’est embêtant !
Eh bien nous allons résoudre ce problème en quelques lignes dans cet article.
Si vous ne savez pas comment intégrer une vidéo, pas de panique, les cours de rattrapages sont ici :
Intégrer le code avec une classe
Allez sur YouTube et cliquez sur le lien Partager sous la vidéo que vous voulez intégrer :
En cliquant sur le bouton « intégrer », vous obtenez un code du style :
Dans ce code d’iframe, vous voyez que sont mentionnés une largeur et une hauteur (width et height), c’est ce qui va nous poser problème lors du passage d’un écran d’ordinateur à une tablette / smartphone.
La 1ère étape est d’allouer une classe à cet iframe. On peut le faire en html pur grâce à un div :
Si vous avez un thème qui vous offre la possibilité de donner une classe à un bloc de texte, vous pouvez également le faire (ici, nous avons le thème Avada).
Voilà, une fois la classe ajouté, nous allons appliquer la CSS qui va bien.
Ajouter la CSS
2è étape, intégrer la CSS qui va permettre à la vidéo de se redimensionner selon la taille de l’écran sur laquelle elle sera affichée.
Il vous suffit de copier / coller le code suivant dans votre feuille css.
Conclusion
Voilà, cet article est plutôt simple mais très pratique pour résoudre un problème qui peut virer au casse-tête.
Si vous avez des questions, posez-les en commentaires ci-dessous.
Et n’hésitez pas à partager vos propres retours d’expérience !
Bonjour, Merci d’avoir pensé à faire cet article, il est clair, et facile à mettre en place.
Cependant, je rencontre un problème.
Ma vidéo me posait un problème de dimensionnement seulement sur mobile.
J’ai entré les codes mais du coup ma vidéo sur mobile se retrouve dans mon en-tête du site, derrière mon logo et menu … ?
Auriez-vous une solution, s’il vous plait ?
Merci par avance pour votre réponse,
Bonjour,
Ah, ça doit venir de votre thème. Avez-vous rentré le code dans le corps de votre page ? Pour vous aider, il faudrait l’URL pour voir le code.
Bonjour, votre tutoriel est vraiment très bien expliqué. Cependant, j’ai essayé le code et je me rends compte que mes vidéos sont bien responsive mais elles ne sont pas toutes affichées.
Pourriez m’éclairer ?
Merci.
Bonjour,
Vous les avez intégrées dans votre site en copiant le lien « Partager » ou avec un code du type iframe ?
ça marche nikel, t’es un putain génie* marine !
tu as sauvé 15 heures de ma vie !
j’y penserais dans 50 ans lorsqu’il me restera plus que 15h à vivre
Marine Prix Nobel des Feuille de Style
* désolé pour « putain de génie » je me rend compte que marche mieux comme expression avec un mec :-))
Ca marche aussi très bien avec une femme 🙂 Ravie de t’avoir sauvé un week-end !
Bonjour,
Où est la feuille CSS dont vous parlez?
Merci d’avance pour votre réponse.
Christian
Bonjour,
Ca dépend de votre thème. Parfois vous en avez une dans les options du thème mais si vous n’avez pas pas fait de css du tout dans le thème, vous pouvez aller dans la colonne de gauche de WordPress Apparence / Personnaliser et en bas vous verrez css additionnel et c’est là que vous pouvez coller le code. N’oubliez pas d’enregistrer puis de rafraîchir votre site.
Merci beaucoup, j’avais ce problème sur mon site https://www.les-detecteurs-de-metaux.fr/ et maintenant ca marche nickel !
🙂
Bonsoir Marine,
cela ça fonctionne plutôt bien, mais il manque une petite chose sur un écran PC la balise prend la totalité de la page selon ce qui a été prédéfinir sur le fichier style CSS, le rendu n’est pas terrible, à l’inverse le rendu sur un portable téléphonique est nickel. Pour éviter cela il faut définir une dimension de basculement (560 px correspond la largeur de l’iframe)
@media (max-width: 560px) {
.video-responsive {
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.video-responsive iframe {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
}
Merci Patrick !!!!!!!!!!!!
bonjour est ce possible de vous contacer svp ?
Pour nous contacter, il suffit de cliquer sur la page… « Contact » dans le menu 😉
Bonjour,
methode de 100% width et 100% height est chouette pour des mobiles, mais sur mon PC ca fait un gros bloque dans Description de mon produit. Exemple : https://www.millapoignees.fr/poignees-de-porte/533-1840-poignee-interieure-dalia-r-7mm.html
Le carrée de YouTube est trop balaise. Y a t-il moyen de garder width/height à 100% sur mobile mais diminuer la taille sur PC ?
Je pense que le commentaire de Patrick va vous aider à résoudre votre problème.
@media (max-width: 560px) {
.video-responsive {
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.video-responsive iframe {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
}
Aprés avoir établie les codes comment récupérer la vidéo svp?
Merci
Bonjour Alicia,
Je ne suis pas sûre de comprendre votre question : vous parlez de l’intégration de votre vidéo depuis YouTube ?
Bonjour, ne fonctionne pas pour moi, sur mon téléphone ça déborde encore. Tempis
Avez-vous bien vidé le cache de votre téléphone ? Vous pouvez vérifier avec la fonction « navigation privée » de votre navigateur.
Bonjour,
Merci pour ce code. Ca marche bien. Par contre je ne comprends d’où vous sortez padding-bottom:56.25% !!
Bonsoir,
Si je désire une vidéo YT à width: 50% (pour la mettre ensuite à 100% via les Média Quéries), cela ne fonctionne plus.
Que faut-il changer dans les CSS pour que la vidéo ne soit pas « rongée » par le padding-bottom ?
Merci
Excellent, merci !
Bonsoir,
Merci beaucoup pour la documentation.
Je viens de porter ce code sur mon site Drupal 7 en ayant installé au préalable un module nommé CSS editor et qui m’a permis de pouvoir définir une feuille de style dans le thème installé. Ce thème ne permettait pas d’ajouter une classe, et maintenant si.
J’ai ajouté les balises et autour de l’iframe de la vidéo et maintenant elle est responsive.
En fait ça met en mode responsive plusieurs types d’encapsulations, pas que les vidéos apparemment.
Merci pour ce cadeau de Noël, et joyeuses fêtes.
Avec plaisir 🙂
Bonjour Marine,
Astuce simple à mettre en place et géniale. Auparavant j’avais régulièrement une alerte Goggle « Vidéo en dehors de la fenêtre d’affichage » et je n’arrivais pas à m’en sortir.
Problème réglé en 2 minutes (upload compris) car mon code a exactement la même structure que votre exemple.
Merci à vous.
Top !
Bonjour,
J’ai bien modifié en conséquence le CSS.
@media (max-width: 560px) {
.video-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.video-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
}
Mes vidéos sont intégrées avec le code suivant :
Mais mes 300 vidéos (environ) ont été désindexées pour « vidéo en dehors en dehors de la fenêtre d’affichage »
Je m’arrache les cheveux tous les jours avec ce problème et mon webmaster me dit que le problème est insoluble….
Y-a-t-il quelque chose qui cloche ?
Merci d’avance pour votre réponse.
Pour suivre code d’intégration des vidéos:
Bonjour Marie, merci pour votre article j’avais le même soucis pour rendre ma carte de France responsive sur mon site https://francedetection.com/autorisations-detections-plage/ et votre article m’a mis sur la bonne voie.
Merci!!
Guillaume
Avec plaisir !