Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Website erstellen » Responsive iFrames und Videos einbinden (Anleitung)

Responsive iFrames und Videos einbinden (Anleitung)

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 2 Kommentare
Lesedauer: 4 Minuten
  • von Markus Seyfferth
  • 16. September 2019

Inhaltsverzeichnis

Doch haben Sie schon einmal Videos von YouTube oder Vimeo in eine Seiten integriert, oder eine Google Map? Sicherlich geht man davon aus, dass so eingebettete Videos und Maps quasi von selber responsiv sind. Aber stimmt diese Annahme auch?

Was ist ein Iframe und wann verwenden Sie es?

Entwickler verwenden das iframe-Tag, um ein externes HTML-Dokument einzubetten, wie beispielsweise ein Facebook-Like-Button, ein YouTube-Video oder ein Werbebanner.

Im folgenden Code wird ein 500-Pixel-Quadrat von der Google-Startseite angezeigt:

<iframe src="https://www.google.com/" height="500px" width="500px"></iframe>

Hier ist ein weiteres Beispiel, in dem wir eine Schaltfläche zum Twittern anzeigen:

<iframe src="https://platform.twitter.com/widgets/tweet_button.html" style="border: 0; width:130px; height:20px;"></iframe>

iFrame-Attribute, die Sie kennen sollten

Es gibt sechs sehr praktische Attribute, mit denen wir das Verhalten und den Stil eines iFrames anpassen können.

Definiert die Adresse der Website, von welcher Inhalte angezeigt werden sollen

<iframe

src="https://google.com/"

</iframe>

Externen Inhalte ohne externes CSS und JavaScript laden

<iframe

srcdoc="<p>Der Inhalt, den Sie hier sehen, wird niemals vom CSS der externen Webseite beeinflusst.</p>"

</iframe>

Die Höhe und Breite des iFrames festlegen

height=“200px“ und width=“500px“ definiert eine fixe Höhe (200px) und Breite (500px) für das Iframe.

<iframe

height="200px" width="500px"

</iframe>

Dem iFrame einen Namen zuordnen

Um dem iFrame eine bestimmte JavaScript-Funktion zuzuordnen, geben wir dem iFrame einen Namen:

<iframe

name="mein-iframe"

</iframe>

Dem iFrame erlauben, den ganzen Bildschirm einzunehmen

Dieses Attribut ist standardmäßig enthalten, wenn man einen Youtube-Embed-Code kopiert:

<iframe

allow="fullscreen"

</iframe>

Die Höhe eines iFrames automatisch an die jeweilige Höhe des Inhalts anpassen

Wenn man nicht bei jedem iFrame genau die Höhe definiert, kann es sein, dass es oben und unten schwarze Balken bekommt. Das können wir dem folgenden JavaScript-Snippet verhindern:

<script> function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';    } </script>

Und indem wir dem iFrame folgenden Wert hinzufügen:

<iframe src="..." frameborder="0" scrolling="auto" onload="resizeIframe(this);" />

Den iFrame-Rahmen entfernen

Jedes iFrame-Element ist von Haus aus von einem Rahmen umgeben. Um diesen zu entfernen, setzen Sie mit dem style-Attribut den Rahmen auf border: none;

<iframe src="https://www.drweb.de/" style="border: none;"></iframe>

Ein responsives Youtube-Video einbetten

Jetzt nehmen wir ein YouTube-Video, z.B. das hier: https://www.youtube.com/watch?v=y5-hH8DnqMk.

Und bauen den Embed-Code ein:

<iframe width="560" height="315" src="https://www.youtube.com/embed/MFQPaN3Slws" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
nicht responsives video iframe Responsive iFrames und Videos einbinden (Anleitung)

Das erschütternde Ergebnis: Das Video ist nicht responsiv!

Wie machen wir dieses eingebettete Video nun also responsiv? In unserem Beispiel hier verwenden wir YouTube. Genauso gut hätten wir aber auch jede andere Plattform nehmen können, etwa Vimeo, oder einen Kartenausschnitt von Google Maps.

Responsive Lösungen

Glücklicherweise gibt es eine ganze Reihe von Lösungen, mit denen man die Videos auf einer Website responsiv gestalten kann. Schauen wir mal auf die verfügbaren Tricks mit CSS und JavaScript.

Pures CSS

Nehmen wir an, dass wir CSS-Frameworks verabscheuen. Wie machen wir unser Video nun mit purem CSS responsiv?

Bedanken wir uns bei Thierry Koblentz für seine Technik des Skalierens von Videos. Er löst das Problem nämlich so, dass jede Veränderung der Videobreite eine Neuberechnung der Videohöhe auflöst, die sogenannte „Intrinsic-Ratio“-Methode. So können Videos sich frei in der Größe verändern, ganz ähnlich, wie das auch Bilder tun.

Viele der CSS-Frameworks und Plugins verwenden diese Methode unter der Haube.

Zunächst müssen wir das eingebette Video in ein div verpacken und ihm eine Klasse zuweisen:

<div class="video-wrapper">
   <iframe src="https://www.youtube.com/embed/y5-hH8DnqMk" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

Nachdem wir nun das iFrame in einen Div-Container verpackt haben, müssen wir den Kind-Elementen des video-wrapper (iframe, object und embed) jeweils eine Weite und eine Höhe von 100 Prozent mitgeben, damit sie sich voll an den Wrapper anpassen:

.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Jetzt gestalten wir die video-wrapper-Klasse wie folgt:

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

Bitte beachten: Die Eigenschaft padding-bottom ist wichtig, damit die Technik auch tatsächlich unter Beachtung des Höhe-zu-Breite-Verhältnisses eines Videos funktioniert. 56,25 Prozent steht für 16:9, 74,25 Prozent für 4:3 und 50 Prozent entspricht 16:10.

In Codepen sieht das Ganze so aus:

Und mit einer Google Map sieht das Resultat dann so aus:

Auch hier haben wir die Google Maps in den <div class=“video-wrapper“> eingebettet. Link zur Demo auf CodePen.io

Responsive Youtube Videos in WordPress

Wenn ein Theme keine responsiven Videos unterstützt, dann kannt man den Support dafür schnell selbst festlegen. Eine PHP-Funktion (einzubauen in die functions.php) sorgt für eine automatische Einbettung in ein Div, die CSS-Angaben sorgen für die optimale Skalierung bei jeder Auflösung.

<?php
/**
 * Responsive Videos, Youtube and Vimeo
 *
 */
function evolution_wrap_oembed( $html ){
    $html = preg_replace( '/(width|height)="\d*"\s/', "", $html ); // Strip width and height #1
    return'<div class="embed-responsive embed-responsive-16by9">'.$html.'</div>'; // Wrap in div element and return #3 and #4
}
add_filter( 'embed_oembed_html','evolution_wrap_oembed',10,1);

Das nötige CSS:

.embed-responsive.embed-responsive-16by9 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.embed-responsive.embed-responsive-16by9 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Diese Angabe macht HTML5 Videos responsive */
video {
    width: 100% !important;
    height: auto !important;
}

FitVids.js

Dieses leichtgewichtige, einfach zu verwendende jQuery-Plugin wurde von Chris Coyier und Paravel entwickelt. Das Plugin automatisiert die Erstellung von responsiven Videos nach der „Intrinsic-Ratio“-Methode von Thierry Koblentz. Es legt um jedes Video einen div.fluid-width-video-wrapper und wendet das erforderliche CSS an. Nach dem ersten JavaScript-Call übernimmt das CSS und erledigt die erforderlichen Schritte zur Responsivität. Lass uns mal schauen, wie das mit unserem Fallbeispiel aussähe.

Auf Codepen findet man die FitVids-Lösung.

Fluidvids.js

Fluidvids.js stammt aus der Feder von Todd Motto. Es nimmt den iFrame-Tag als Ziel und wendet die gleiche Methode, wie das eben genannte Plugin an, um die Berechnung des Seitenverhältnisses durchzuführen. Der Vorteil dieses Scripts ist der, dass es nicht auf Drittanbieter angewiesen ist, also keinerlei Dependenzen mitbringt.

Mit minimalem Script-Aufwand erledigt es das Rendering schneller und bietet insgesamt eine bessere Performance.

Hier die FluidVids-Lösung auf Codepen.

ZURB Foundation

ZURB Foundation bietet eine CSS-LÖsung, die geradezu erstaunlich einfach zu verwenden ist. Mittels flex-video sorgt man dafür, dass ein Video auf jeder Plattform perfekt skaliert. Dafür benötigt man allerdings das Foundation-Framework.

Verwenden wir auch diese Lösung, um unser Fallbeispiel responsiv zu gestalten.

Und so sieht die Lösung für ZURB aus: Link zur Demo auf CodePen.io

Fazit

In diesem Beitrag haben wir verschiedene Lösungen vorgestellt, mit deren Hilfe man responsive Videos für eine Website erstellen kann — abhängig vom jeweiligen Anwendungsfall und der Art des Projekts.

Die Besucher sollten Inhalte uneingeschränkt, von jedem Gerät aus in gleicher Weise konsumieren können. Dabei geht es nicht nur um das schiere Funktionieren. Vielmehr müssen Videos auch ansehnlich gerendert werden und entsprechend fantastisch aussehen. Responsives Video passt wunderbar auf diese Zielsetzung.

Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

seolist seo frankfurt logo

SEOlist.IO – SEO Agentur & SEO Freelancer Frankfurt

Frankfurt am Main

Dunkel Design | Webdesign Grafikdesign Logodesign

Köln

Michael Freitag Immobilien-Marketing München logo

Critch GmbH – Immobilienkanzlei FREITAG®

München

hw brand experience logo.

H&W // Brand Experience

Schwäbisch Gmünd

Wee Media Agentur Logo.

Wee Media | Webdesign Agentur

Dernbach

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

2 Antworten zu „Responsive iFrames und Videos einbinden (Anleitung)“
— was ist Deine Meinung?

  1. Claudia sagt:
    15. Oktober 2021 um 15:19 Uhr

    Super! Habe lange nach einer solchen Möglichkeit gesucht, die Videos waren entweder zu hoch oder zu schmal. Danke für die „pure“ CSS-Lösung, sie funktioniert prima mit meinen eingebetteten youtube-Videos.

    Antworten
  2. Nick Freund sagt:
    10. Juni 2021 um 8:36 Uhr

    Dank für diesen tollen Artikel. Wie mache ich das aber, wenn ich ein eigenes Video in WordPress hochlade und dieses per Video Einbindung responsiv machen möchte? Nutze ich hierfür am besten ein Plugin? Und welches Plugin wäre da kostenlos? Nochmals Danke, beste Grüße, Nick Freund

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑