Pour utiliser un design adaptatif pour une vidéo YouTube, ajoutez le code suivant au fichier CSS principal, ou à la feuille de style appliquée à votre site web :
/* YouTube Responsive CSS for HubSpot */
.hs-responsive-embed-youtube {
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
padding-top: 25px;
}
.hs-responsive-embed-youtube iframe {
position: absolute;
width: 100%!important;
height: 100%!important;
}
Ce code 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.
- Une fois le code ajouté, copiez l'URL de partage de la vidéo YouTube correspondante.
- Accédez à l'éditeur de blog, de page de destination ou de page de site web, selon le cas.
- Dans le module rich text, cliquez sur Insérer > Insérer un élément multimédia.
- Collez l'URL de partage de la vidéo YouTube dans la zone de texte URL (vous n'êtes pas tenu de préciser de dimensions).
- Cliquez sur OK.
Toutes les vidéos YouTube ajoutées de cette manière utiliseront un design adaptatif.
Notez que si vous choisissez d'intégrer la vidéo directement à votre page, vous devez inclure le code d'intégration dans la classe .hs-responsive-embed-youtube. Autrement dit, vous devez insérer le code d'intégration entre les tags suivants :
