COS-Pages-Editor

Wie mache ich mein eingebettetes YouTube-Video responsiv?

Zuletzt aktualisiert am: April 25, 2016

Damit ein YouTube-Video responsiv wird, müssen Sie den folgenden Code zu Ihrer primären CSS-Datei oder zu dem auf Ihre Website angewendeten Stylesheet hinzufügen:

/* 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;

}

Dieser Code wird auf YouTube-Videos angewendet, die über die Medien-Einbindungsfunktion im Inhaltseditor hinzugefügt werden.

  • Nachdem Sie diesen Code hinzugefügt haben, kopieren Sie die URL zum Teilen des jeweiligen YouTube-Videos.
  • Navigieren Sie zu dem Blog-, Landing-Page- oder Website-Seiteneditor.
  • Klicken Sie in einem Rich-Text-Modul auf Einfügen > Video einfügen.
Medien einfügen
Medien einfügen
  • Fügen Sie die URL zum Teilen des YouTube-Videos in das Eingabefeld Medien-URL ein (Sie können die Abmessungen frei lassen).
  • Klicken Sie auf OK.
Video-URL einfügen
Video-URL einfügen

Alle YouTube-Videos, die Sie über dieses Verfahren hinzufügen, werden responsiv gemacht.

Bitte beachten Sie: Wenn Sie das Video stattdessen einbetten, müssen Sie den Einbindungscode mit der Klasse .hs-responsive-embed-youtube umschließen. Dies bedeutet, dass Sie den Einbindungscode mit den folgenden Tags umschließen müssen:
<div class="hs-responsive-embed-youtube"></div>