Pour créer un design adaptatif pour une vidéo YouTube, ajoutez le code CSS suivant à la feuille de style appliquée à votre site :
/* YouTube Responsive CSS for HubSpot */.hs-responsive-embed {
position: relative;
height: 0;
overflow: hidden;
padding-top: 0;
padding-left: 0;
padding-right: 0;
}.hs-responsive-embed iframe,
.hs-responsive-embed object,
.hs-responsive-embed embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}.hs-responsive-embed,
.hs-responsive-embed.hs-responsive-embed-youtube,
.hs-responsive-embed.hs-responsive-embed-wistia,
.hs-responsive-embed.hs-responsive-embed-vimeo {
padding-bottom: 56,25 %;
}
Ce code CSS s'appliquera aux vidéos YouTube ajoutées à l'aide de la fonctionnalité d'intégration de contenus multimédias de l'éditeur de contenu.
- Après avoir ajouté le code CSS, copiez l'URL de partage de la vidéo YouTube à intégrer.
- Accédez à votre blog, vos pages de destination ou à des pages de votre site web.
- Placez le curseur sur une page ou un article et cliquez sur Modifier.
- Recherchez un module de texte enrichi. Cliquez dans le module puis sur Insérer > Intégrer.
- Collez l'URL de partage de la vidéo YouTube dans le champ URL, puis cliquez sur OK.
Toutes les vidéos YouTube ajoutées de cette manière utiliseront un design adaptatif.
Remarque : si vous sélectionnez l'option Code à la place, vous devez ajouter au code d'intégration la classe .hs-responsive-embed-youtube (par exemple, <div class="hs-responsive-embed-youtube"></div>).