COS-Pages-Editor

Comment utiliser un design adaptatif pour ma vidéo YouTube intégrée ?

Dernière mise à jour: July 7, 2017

Disponible avec :

Produit: HubSpot Marketing
Abonnement: Basique, Pro et Entreprise

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.
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.
Collez l'URL de la vidéo.
Collez l'URL de la vidéo.

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 :