Hinweis: Dieser Artikel wird aus Kulanz zur Verfügung gestellt. Er wurde automatisch mit einer Software übersetzt und unter Umständen nicht korrekturgelesen. Die englischsprachige Fassung gilt als offizielle Version und Sie können dort die aktuellsten Informationen finden. Hier können Sie darauf zugreifen.
CMS-Pages-Editor

Eingebettetes YouTube-Video responsiv machen

Zuletzt aktualisiert am: Dezember 19, 2018

Produkte/Lizenzen

Marketing Hub  Professional, Enterprise
Basic

Um ein YouTube-Video responsiv zu machen, fügen Sie den folgenden CSS-code zum Stylesheet hinzu, das Ihrer Site zugeordnet ist:

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

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

  • Kopieren Sie nach dem Hinzufügen des CSS-Codes die URL zum Teilen des einzubettenden YouTube-Videos.
  • Navigieren Sie zu Ihrem Blog, Ihren Landing-Pages oder Ihren Website-Seiten.
  • Bewegen Sie den Mauszeiger über eine Seite oder einen Beitrag und klicken Sie auf Bearbeiten.
  • Suchen Sie ein Rich-Text-Modul. Klicken Sie auf das Modul und klicken Sie dann auf Einfügen > Einbetten.
insert-embed-rich-text-editor
Medien einfügen
  • Fügen Sie die URL zum Teilen des YouTube-Videos in dasFeld URL ein und klicken Sie dann auf OK.
embed-url
Video-URL einfügen

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

Bitte beachten Sie: Wenn Sie stattdessen die Option Code auswählen, müssen Sie den Einbindungscode mit der Klasse .hs-responsive-embed-youtube umschließen (z. B. <div class="hs-responsive-embed-youtube"></div>).