-Anzeige-

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.

Youtube Video responsive einbetten
5 (100%) 1 vote

PS: Um den Link zu dieser Seite Freunden zu schicken, kannst Du Dir mit nur einem Klick die...
Artikel-URL kopieren
Teilen per
Facebook
WhatsApp
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 an qualifizierten Käufen.
Diese Website nutzt Cookies, um bestmögliche Funktionalität bieten zu können. Unter Datenschutz erfährst Du mehr dazu.
schließen