Cookies, lecker Cookies :-)
Auch diese Seite analysiert, u.a. durch Cookies, deine Nutzung zwecks Reichweitenmessung sowie Optimierung und Personalisierung von Inhalten und Werbung. Eingebundene Dritte führen diese Informationen ggf. mit weiteren Daten zusammen. Details hierzu findest du in der Datenschutzerklärung. Du kannst deine Einstellungen jederzeit unter Cookie-Einstellungen unten auf der Seite ändern. Indem du auf der Seite weitersurfst, stimmst du – jederzeit für die Zukunft widerruflich – dieser Datenverarbeitung durch den Seitenbetreiber und Dritte zu. Weitere Informationen: Impressum
Nur notwendige Cookies akzeptieren
Ja, ich bin einverstanden!
Details

Notwendige Cookies

Diese Cookies sind immer aktiviert, da sie für Grundfunktionen der Website erforderlich sind. Hierzu zählen Cookies, mit denen gespeichert werden kann, wo auf der Seite du dich bewegst – während eines Besuchs oder, falls du es möchtest, auch von einem Besuch zum nächsten. Sie tragen sie zur sicheren und vorschriftsmäßigen Nutzung der Seite bei.
Marketing & Social

Marketing-Cookies werden verwendet, um Besuchern auf Webseiten zu folgen. Die Absicht ist, Anzeigen zu zeigen, die relevant und ansprechend für den einzelnen Benutzer sind und daher wertvoller für Publisher und werbetreibende Drittparteien sind.

🔍
SUCHE
Abbrechen
Digital Marketing Experte - Marc Hoffmann
Bekannt aus:
Bekannt aus:
Digital Marketing
Nachtlesemodus aktivieren

Youtube Video responsive einbetten


In dieser Anleitung zeige ich Dir, wie einfach Du ein Youtube Video responsive einbetten kannst.

Werden Video-iframes ohne die folgende Anpassung auf einer Website eingebunden, kann es dazu kommen, dass diese Videoelemente in der mobilen Version einer Website über den Rand der Seite hinausragen und zudem nicht wie erwartet bedienbar sind. Das sieht erstens bescheiden aus und zweitens ärgert sich der User.

Falsch (Problem wird in mobiler Ansicht deutlich!)


Richtig

Video-iframe responsive einbinden – So geht´s!

Um Dir die Anpassung so einfach wie möglich zu machen, ist jetzt nur ein wenig Copy-Paste angesagt. 😉

CSS Code-Snippet kopieren

.mh_responsive-video {position: relative;padding-bottom: 56.25%;padding-top: 0px;height: 0;overflow: hidden;}
.mh_responsive-video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

WordPress Customizer öffnen

wordpress customizer


Code-Snippet einfügen und auf Veröffentlichen klicken

css code-snippet


Dieses Code-Snippet kopieren und dort im Artikel einfügen, wo das Video angezeigt werden soll

<div class="mh_responsive-video">

</div>


Video auf Youtube aufrufen und auf Teilen klicken

youtube teilen


Auf Einbetten klicken

youtube einbetten


Folgende Checkboxen anklicken

youtube embed funktionen
Mit diesen Optionen zum Einbetten vermeidet Ihr erstens, dass dem User nach Eurem Video weitere Videovorschläge angezeigt werden, die Ihn vom Thema ablenken und von Eurer Website oder Eurem Thema ablenken können. Zweitens verzichtet Ihr auf das Cookietracking von Youtube zu Gunsten der Privatsphäre Eurer User.


Auf Kopieren klicken, um den obenstehenden Code zu kopieren

youtube embed code


Youtube Code im Artikel zwischen den vorher eingefügten Snippet-Zeilen einfügen und
die beiden Parameter [width=“560″ height=“315″] aus dem Youtube-Snippet entfernen.

youtube code einfügen


Den Artikel speichern – Fertig!!!
Jetzt passt sich Dein eingebundenes Video automatisch der Bildschirmgröße des verwendeten Gerätes an und Deine User können es einwandfrei bedienen.

Hinweis: Sollte ich in diesem Artikel Provisions-Links – auch Affiliate-Links genannt – verwendet haben, sind diese durch „(Provisions-Link)" gekennzeichnet. Erfolgt über diese Links eine Bestellung, erhält coach-hoffmann.de eine Provision vom Verkäufer, für den Besteller entstehen keine Mehrkosten. Als Amazon-Partner verdiene ich an qualifizierten Käufen.
 
Komm in meine Facebook Gruppe!
Wenn Du noch mehr Insights erfahren möchtest, um aus Deinen Facebook Werbekampagnen das Maximum herauszuholen!
facebook ads gruppe

Hier bekommst Du die Passworte für die geschützten Premium-Artikel!

(Bild anklicken!)hintergrundwissen

Zum Seitenanfang