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 {
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 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 :