Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Website erstellen » Responsive iFrames und Videos einbinden (Anleitung)

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.

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 2 Kommentare
Lesedauer: 4 Minuten
  • von Markus Seyfferth
  • 16. September 2019
Bookmarke mich
Share on pocket

SEO-Sicht

Der Informations­designer

JOHDA Webdesign

Wee Media | Webdesign Agentur

marketer UX

ARIT Services GmbH

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>

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.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Markus Seyfferth

Markus Seyfferth

ist Herausgeber und Chefredakteur von Dr. Web. Zuvor übernahm er für sechs Jahre 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 geleitet hat.

Agenturpartner

UnitedAds

Starnberg

HELD Werbeagentur

Traunstein

Carmen Hurst | Webdesign

Bad Homburg

Glamourpixel Fotodesign

Gelsenkirchen

BIZ Digital Marketing

Nürtingen

Alle Agenturpartner

Jobs

Copywriter – Vollzeit

Remote

System Engineer – Managed Service

Karlsruhe

Google Ads Kampagnen­betreuer

Salzburg

Assistent/in der Geschäfts­führung

Innsbruck

WordPress Developer – Vollzeit

Remote

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Elementor für WordPress: Was sind die Vor- und Nachteile?

Elementor ist der führende Pagebuilder für WordPress und kann mehr als 7 Millionen (!) aktive Installationen für sich verbuchen. Ich habe mir den Senkrechtstarter für dich angesehen.

 →   

Videomarketing: Das kleine 1×1 zur Erstellung von Videos für Facebook, Instagram & Twitter

Mit dem richtigen Videomarketing kannst du die Aufmerksamkeit von vielen Millionen Zuschauers erregen, auf eine leicht verständlichen Art & Weise. Eine Einführung in das Video-Marketing:

 →   

Relaunch: So erstellst du ein Lastenheft für deine Website

Mit diesem Artikel möchte ich dir Tipps geben, wie du dein Lastenheft in Bezug auf einen bevorstehenden Website Relaunch erweiterst.

 →   

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.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.