YouTube ne propose pas nativement la fonctionnalité « Intégrer sur un site web » depuis son interface de partage d’une vidéo Short mais voici comment contourner cela simplement :
Voici la procédure pour insérer une vidéo (Short) YouTube sur votre site web
- Rendez-vous sur l’URL du Short YouTube en question ;
- Cliquez sur le bouton de partage du Short YouTube que vous souhaitez intégrer sur votre site web afin de récupérer l’URL de partage (ou récupérez l’URL directement dans votre navigateur) ;
- Cette URL doit contenir /shorts/ et se terminer par un ID composé de chiffres et de lettres en majuscules et minuscules (exemple : /shorts/iMt8D-RkVdQ )
- La prochaine étape consiste simplement à récupérer le code d’intégration d’une vidéo classique (voir ci-dessous) et à remplacer l’ID de la vidéo d’origine par l’ID de votre Short YouTube (découvert à l’étape d’avant) à la suite de « /embed/ » :
<iframe width="100%" height="560" src="https://www.youtube.com/embed/iMt8D-RkVdQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>Une fois cette étape finalisée, il ne vous reste plus qu’à adapter les width et height en fonction de votre besoin puis d’intégrer ce code HTML dans l’éditeur HTML de votre site web.
Et voilà, votre Short YouTube est désormais intégré en HTML dans votre site web, sans l’aide d’un plugin, en moins de 2 minutes !
Voici un exemple concret d’intégration qui fonctionne avec ce principe :
Si vous souhaitez centrer votre vidéo (iframe) au centre de votre page et avoir un rendu plus « vertical / portrait » comme les Shorts, vous pouvez réutiliser le code ci-dessous et adapter simplement l’ID du Short YouTube à intégrer :
<div align="center"><iframe width="400" height="800" src="https://www.youtube.com/embed/lCaWQWORNXU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
On ajoute ici une div avec align= »center » qui entoure l’iframe et on a ajusté les dimensions width et height pour que ce soit au format portrait.
Voici le rendu que cela fera :
Comment insérer un Short YouTube sur WordPress ?
Sur WordPress, vous avez deux options :
- Soit coller simplement l’URL de votre Short dans votre éditeur Gutenberg : vous aurez alors une vidéo intégrée automatiquement au format paysage sans avoir de contrôle sur ses dimensions et vous ne pourrez pas optimiser l’aspect en version mobile.
- Soit utiliser l’astuce ci-dessus avec le code indiqué en fonction du rendu souhaité (format paysage ou vertical et centré ou non).
PS : Si vous souhaitez en savoir plus sur la rémunération des Shorts YouTube, vous pouvez consulter notre article dédié.
Fondateur de LEPTIDIGITAL et SUPASST, je suis également consultant spécialisé en acquisition de leads B2B (SaaS). Passionné par le marketing digital, l’intelligence artificielle et le SEO. Avant de devenir indépendant, j’ai occupé des postes clés en tant que SEO Manager et responsable e-commerce pour plusieurs grandes entreprises (Altice Media, Infopro Digital, Voyage Privé et le Groupe ERAM). Sur le plan perso, je suis un curieux insatiable, également passionné par la photographie, le badminton et les voyages. Pour toute demande de partenariat, privilégiez LinkedIn ou email ([email protected]).
Merci pour ce tuto, mais sur mon site web cela n’a pas fonctionné (erreur de lecture). dommage, ça avait l’air bien pratique 🙂
Bonjour Laurence,
Quel est le CMS de votre site web ? Vous avez bien intégré le code dans une section HTML ?
Merci et bonne journée
Merci beaucoup pour cette astuce ! Cela à résolu mon problème en 5 min !!!
Ravi que ça fonctionne pour vous également 🙂
Youtube ne semble pas autoriser la manip – que ce soit sur firefox ou chrome, ça ne fonctionne pas malheureusement…
Bonjour Cédric,
De quelle manipulation parlez-vous ? Il faut remplacer l’ID associé au short dans le code de partage de YouTube depuis votre éditeur HTML et non depuis YouTube directement, sinon cela ne fonctionnera en effet pas. Bonne journée
à partir d’ici : La prochaine étape consiste simplement à récupérer le code d’intégration d’une vidéo classique (voir ci-dessous) et à remplacer l’ID de la vidéo d’origine par l’ID de votre Short YouTube (découvert à l’étape d’avant) à la suite de « /embed/ »
vous m’avez perdue !
que voulez-vous dire par là ?
Bonjour Anna, en réalité il faut simplement copier le code HTML de partage d’une vidéo classique et remplacer « embed » par « shorts » : ex : https://www.youtube.com/embed/iMt8D-RkVdQ par https://www.youtube.com/shorts/iMt8D-RkVdQ
Ensuite il faut remplacer « iMt8D-RkVdQ » par l’ID de votre short ;). J’espère que c’est plus clair.
Après moult tentatives, il n’y a que le rectangle de la vidéo qui s’affiche mais aucune vidéo
Bonjour Déborah, quelle technique avez-vous essayée ? Il y en a deux dans cet article. Merci et bonne journée
Bonjour,
J’ai également un message d’erreur avec cette technique sur firefox comme sur chrome.
J’ai repris un iframe (strandard de youtuBe) et remplacé le lien entre guillemets par celui d’un short à la suite de à la suite de /embed/
• Quand j’essaie de lancer la vidéo sur Firefox/Chrome, j’ai : Une erreur s’est produite. Veuillez réessayer ultérieurement. (ID de lecture : JP8sVAPSJ7srg66f) En savoir plus
(ID de lecture est changeant selon page ou navigateur)
Mon site a été créé par une agence qui n’utilise pas de framework type wordpress.
Quelles solutions je peux avoir ?
Merci,
Bonjour,
Il faut vraiment juste remplacer l’ID de la fin, dans le code iframe, par celui de la vidéo Short (il faut laisser le /embed/ et l’URL ne doit pas contenir /shorts/).
Avez-vous toujours le problème ? N’hésitez pas à copier coller votre code dans le commentaire pour que je puisse voir ce qui pose problème.
Bonne journée
Super ça marche après quelques ajustements,
merci