Zum Artikel-Inhalt springen
Dr. Web Digital Experts-Logo
  • Kostenloser Grundeintrag
  • Ratgeber
  • Auf Dr. Web werben
  • Mein Konto
  • Jobs
  • Alle Digitalagenturen
  • Berlin
  • Hamburg
  • München
  • Köln
  • Frankfurt
  • Stuttgart
  • Düsseldorf
  • Leipzig
  • Dresden
  • Agentur eintragen →
  • × 🍔 schliessen
  • ☰ Menu

Responsive iFrames und Videos einbinden (Anleitung)

Von modernen Apps und Websites erwartet man, dass sie sich an verschiedesten Auflösungen in möglichst idealer Weise anpassen. So ergibt sich ein optimales Benutzererlebnis, ganz egal, welches Gerät oder welche Auflösung genutzt wird. Inhalte, Bilder und Videos sollten sich in gleicher Weise fließend verhalten, um unterschiedliche Viewports bestmöglich zu bedienen.

Top of the Stack

GeneratePress

GeneratePress ist ein WordPress-Theme, das bekannt ist für seine schlanke und SEO-freundliche und PageSpeed-optimierten Struktur. Mehr erfahren ↗

Elementor

Elementor ist ein Page- & Theme-Builder für WordPress. Mit Elementor kann man individuelle Seiten bauen und Templates anlegen. Mehr erfahren ↗

Sendinblue

Sendinblue ist ein Tool für datenschutz-konforme Marketing-Automation, die viel Zeit spart und die Konversionsraten erhöht. Mehr erfahren ↗

SEOfolgreich

Deine Experten für Local SEO in München. Local SEO richtet sich an lokale Unternehmen, die ihre Sichtbarkeit erhöhen wollen. Mehr erfahren ↗

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.

Dazu passt:   So erstellst du ein Lastenheft für eine Website

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>

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.

Dazu passt:   Responsive Navigation: CSS-only Dropdown-Menüs ohne JavaScript

In Codepen sieht das Ganze so aus:

See the Pen Responsives-Video by Dr. Web (@drweb) on CodePen.light

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.

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:

See the Pen Responsive Videos mit FitVids by Dr. Web (@drweb) on CodePen.light

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.

Dazu passt:   Icons selber erstellen: So geht es

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

Hier die Lösung im Codepen:

See the Pen FluidVids demo by Dr. Web (@drweb) on CodePen.light

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.

See the Pen Responsive Videos in ZURB by Dr. Web (@drweb) on CodePen.light

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 2006 aktiv im Thema Medien, Vertrieb und Kundenbindung. Zunächst als studentischer Mitarbeiter einer Berliner Business School, später hauptberuflich als Vertriebsleiter bei einem Start-up der Freien Universität Berlin. Für sechs Jahre übernahm er als Vorstand die geschäftsführende Verantwortung des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte übernommen hat. Seit 2019 verantwortet er die technische und redaktionelle Leitung von Dr. Web und arbeitet für Agenturkunden von Dr. Web Digital.

Neue Agenturen auf Dr. Web

Binary Garden

Hannover

Interstruct Communications AG

Berlin

Die Texterin

Köln

JUNIQUE Design

Bonn

Vogelsang Werbe- und Projektbüro

Hannover

New Era Marketing

Kämpfelbach

Agentur eintragen

Schreibe einen Kommentar Antworten abbrechen

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

Passende Beiträge

geomanist - Beautiful Simplicity.
Websites

Google Fonts & Co. – diese Schriften sollte jeder kennen

Typografie ist das derzeit einzige Gestaltungselement ist, das sich wirklich noch nennenswerter Änderungen unterzieht. Insofern ist es smart, hier auf dem Laufenden zu bleiben.

Weiterlesen »
Sonnenaufgang auf dem Berg, über den Wolken
HTML

Website-Vorlagen: Die 101 besten, kostenlosen HTML-Templates (2021-Update)

Websiten so ganz ohne ein CMS zusammenzubauen ist eine schnelle und bequeme Art, die eigene Webseite live zu bringen. Das macht vor allem dann Sinn, wenn sich die Inhalte eh nur selten ändern. Im folgenden Artikel stellen wir also eine Sammlung an kostenlosen HTML-Templates zusammen. Viel Spaß damit!

Weiterlesen »
beispiel einer css-navigation des flexbox-albatross.
CSS

Responsive Navigation: CSS-only Dropdown-Menüs ohne JavaScript

Wohin mit der Navigation? Diese Frage muss bei eigentlich jedem Webprojekt beantwortet werden. Gerade bei umfangreichen Websites ist es nicht immer einfach, die richtige Antwort darauf zu finden. Besteht eine Webpräsenz aus vielen Seiten und Unterseiten, bietet sich häufig ein Dropdown-Menü an.

Weiterlesen »
  • Agentur finden
  • Agentur eintragen
  • AGB
  • CSS
  • Datenschutzhinweise
  • Dr. Web Autoren
  • Impressum
  • SEO
  • Webdesign
  • Websites
  • WordPress
  • Nach oben ↑
Menü
  • Agentur finden
  • Agentur eintragen
  • AGB
  • CSS
  • Datenschutzhinweise
  • Dr. Web Autoren
  • Impressum
  • SEO
  • Webdesign
  • Websites
  • WordPress
  • Nach oben ↑
Wir verwenden Cookies, um Besucherzahlen zu messen. Mehr dazu in unserer Datenschutzerklärung. Einverstanden? EinstellungenIch stimme zu
Cookie-Einstellungen

Cookies im Überblick

Wir verwenden Cookies, mit denen wir analysieren und verstehen können, wie Sie diese Website nutzen. Auch kommen technisch notwendige Cookies zum Einsatz, bspw. für den Kunden-Login. Ferner verwenden wir auch Cookies von Drittanbietern. Diese Cookies werden nur mit Ihrer Zustimmung in Ihrem Browser gespeichert. Sie haben auch die Möglichkeit, diese Drittanbieter-Cookies zu deaktivieren. Das Deaktivieren dieser Cookies kann sich jedoch zulasten der Nutzererfahrung auswirken.
Notwendig
immer aktiv

Notwendige Cookies sind unbedingt erforderlich, damit die Website ordnungsgemäß funktioniert. Diese Kategorie enthält nur Cookies, die grundlegende Funktionen und Sicherheitsmerkmale der Website gewährleisten. Diese Cookies speichern keine persönlichen Informationen.

Nicht zwingen notwendige Cookies

Alle Cookies, die für die Funktion der Website nicht unbedingt erforderlich sind und zur Erhebung personenbezogener Daten des Benutzers über Analysen, Anzeigen und andere eingebettete Inhalte verwendet werden, werden als nicht erforderliche Cookies bezeichnet.

SPEICHERN UND AKZEPTIEREN
Das große Dr. Web Icon-Set:
970+ Icons, im SVG-Format
Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Danke nein, ist nichts für mich.
Invalid email address
Danke dir! Hier ist das Icon-Set:

Hier herunterladen (zip-Datei, 843 kB)

Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Danke nein, ist nichts für mich.
Invalid email address
Danke dir! Hier ist das Icon-Set:

Hier herunterladen (zip-Datei, 843 kB)