Bootstrap 4 Schnellstart – Inhalte/Videos einbetten
Videos und Einbettung
Falls du ein Video oder einen iframe (z.B. YouTube-Video), verwenden willst, hast du meist keine Responsiveness. Bootstrap bietet dir für die Responsiveness jedoch Lösungen an.
Um diese Funktion zu nutzen, benötigst du ein Elternelement über dem video- bzw. iframe-Element. Dieses bekommt die Klasse embed-responsive und das gewünschte Seitenverhältnis über eine separate Klasse:
| Seitenverhältnis | Klasse |
| 21:9 | embed-responsive-21by9 |
| 16:9 | embed-responsive-16by9 |
| 4:3 | embed-responsive-4by3 |
| 1:1 | embed-responsive-1by1 |
Hier ist der Code:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src=" https://www.youtube.com/embed/XGakvZ4tDKM"></iframe>
</div>
In dieser Übung erfährst du, welches Video hier eingebettet wurde: