Matthias

Tags: #lernen #radio #tipp #webdesign #writefreely

Lasst mich vorausschicken, dass ich Einbettungen fremder Inhalte per Iframe eigentlich nicht mag. Man muss immer darauf achten, dass diese auch verfügbar sind, keine gesetzwidrigen Inhalte beherbergen und einen nicht aus­spionieren. Okay, sind wir mal ehrlich: Das mit dem Aus­spionieren lässt sich heutzutage nicht mehr vermeiden, wenn man einbettet, DSGVO hin oder her.

Nichtsdestotrotz ergibt sich hin und wieder einfach die Notwendigkeit, etwas einzubetten, z.B. ein YouTube-Video – einfach, um den eigenen Blog anzureichern, auf eigene Inhalte zu verweisen oder überhaupt interessant genug zu bleiben.

Nun reichen leider oft die <iframe …>-Einbettungs-Codes der Video-Anbieter nicht aus, um eine ordentliche, responsive Darstellung im eigenen Blog zu ermöglichen. Hier ist die Lösung.

Wir definieren einfach im CSS unseres Blogs folgende Ergänzung für einen Video-Container:

/* Responsive Video Container */
.video-container {
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 */
  position: relative;
} 

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

Im Beispiel-CSS gehen wir von Videos im 16:9-Format aus. Der notwendige Wert für padding-top errechnet sich aus

Wert = y / x * 100

also bspw. für 4:3-Videos als

Wert = 3 / 4 * 100
     = 75

Wir würden in diesem Fall oben einsetzen:

  padding-top: 75%; /* 4:3 */

Danach können wir die Einbettungs-Codes der Anbieter einfach in einem <div …> »einklammern«:

<div class="video-container"><iframe …></iframe></div>

Im Folgenden findet ihr ein paar Beispiele dazu.

YouTube-Video

Einbettungs-Code von YouTube, geklammert in unserem neuen <div>:

<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/P_jlzzzn8Rw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>

Ergebnis

Vimeo-Video

Einbettungs-Code von Vimeo, geklammert in unserem neuen <div>:

<div class="video-container"><iframe src="https://player.vimeo.com/video/80836225?h=caeadc66bb&badge=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>

Ergebnis

PeerTube-Video (aus dem Fediverse)

Einbettungs-Code von PeerTube, geklammert in unserem neuen <div>:

<div class="video-container"><iframe title="The Intelligent Plant – Scroll Website" src="https://tube.kh-berlin.de/videos/embed/0df53e9a-6e79-4a0a-b041-bb2449bdb35b" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" width="560" height="315" frameborder="0"></iframe></div>

Ergebnis

Radio-Player

Zum Einbetten des Radio-Players einer AzuraCast-Station ist außer dem Einbettungscode des Anbieters nichts weiter nötig:

<iframe src="https://demo.azuracast.com/public/azuratest_radio/embed?theme=light" frameborder="0" allowtransparency="true" style="width: 100%; min-height: 150px; border: 0;"></iframe>

Ergebnis

Webseite am Beispiel eines Radio-Sendeplans

Bei AzuraCast-Stationen kann auch hier einfach der angebotene Einbettungs-Code verwendet werden:

<iframe src="https://demo.azuracast.com/public/azuratest_radio/schedule/embed?theme=light" frameborder="0" allowtransparency="true" style="width: 100%; min-height: 800px; border: 0;"></iframe>

Ergebnis

Für die ganz Wilden …

Man kann sogar die o.g. noch in ein <figure>-Element einpacken, um z.B. eine schicke Bildunterschrift und ggf. eine Quellenangabe hinzuzufügen!

<figure><div class="video-container"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/n_GFN3a0yj0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div><figcaption>AC/DC live at River Plate, Dezember 2009 (YouTube)</figcaption></figure>

Ergebnis

---

Viel Spaß beim Erstellen eines noch lebendigeren Blogs!