Einbetten von Videos, Radio-Playern und Webseiten
26. März 2023

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._
<!--more-->
Wir definieren einfach im CSS unseres Blogs folgende Ergänzung für einen _Video-Container_:

```css
/* 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:

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

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

```html
<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>`:

```html
<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

<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>

## Vimeo-Video

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

```html
<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

<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>

## PeerTube-Video (aus dem _Fediverse_)

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

```html
<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

<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>

## Radio-Player

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

```html
<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

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

## Webseite am Beispiel eines Radio-Sendeplans

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

```html
<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

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

## 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!

```html
<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

<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 – Thunderstruck, live at River Plate, Dezember 2009 (YouTube)</figcaption></figure>

<hr/>

_Viel Spaß beim Erstellen eines noch lebendigeren Blogs!_