Avertissement : cet article est le résultat de la traduction automatique, l'exactitude et la fidélité de la traduction ne sont donc pas garanties. Pour consulter la version originale de cet article, en anglais, cliquez ici.
CMS-Pages-Editor

Créer un design adaptatif pour une vidéo YouTube

Dernière mise à jour: décembre 19, 2018

Disponible avec :

Hub Marketing Professional, Enterprise
Basique

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.

insert-embed-rich-text-editor
Insérer un média
  • Collez l'URL de partage de la vidéo YouTube dans le champ URL, puis cliquez sur OK.
embed-url
Coller l'URL de la vidéo

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>).