So betten Sie ein responsives YouTube-Video in die Website ein

Last updated 18. Oktober 2021

Inhalt

Einbetten eines responsiven YouTube-Videos mit Bootstrap

Das Einstellen von YouTube-Videos auf Websites ist heutzutage üblich. YouTube stellt einen Iframe-Code bereit, um das Video auf Websites einzubetten. Das durch diesen Iframe-Code gerenderte Video reagiert jedoch nicht. Dies bedeutet, dass Ihr Video auf kleinen Geräten wie Mobiltelefonen oder Tablets möglicherweise nicht gut aussieht.

Tatsächlich müssen Ihre eingebetteten YouTube-Videos für eine bessere Benutzererfahrung responsive sein. In diesem Artikel untersuchen wir, wie Sie responsive YouTube-Videos in Ihre Website einbetten.

Ich habe 3 mögliche Wege gefunden, um unser Endergebnis zu erreichen. Sehen wir es uns einzeln an.

Einbetten eines responsiven YouTube-Videos mit Bootstrap

Bootstrap ist das beliebteste Front-End-Tool, mit dem Sie responsive Websites entwickeln können. Es bietet auch eine einfache Lösung, um Ihr YouTube-Video reaktionsschnell zu machen.

Um loszulegen, müssen Sie zunächst die CSS-Datei von Bootstrap wie folgt einbinden. Wenn Sie Bootstrap bereits in Ihrem Projekt verwenden, überspringen Sie diesen Schritt.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

Verwenden Sie als Nächstes den folgenden HTML-Code, um Ihr Video mit einem Bootstrap einzubetten.

<div class="container">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID?rel=0"></iframe>
    </div>
</div>

Ersetzen Sie den Platzhalter VIDEO_ID durch die tatsächliche Video-ID. Probieren Sie es aus und Sie sollten sehen, dass Ihr Video auf kleineren Geräten gut funktioniert.

Informationen zu dieser Einbettungsmethode finden Sie in der Bootstrap-Dokumentation.

Responsives YouTube-Video mit Fancybox

Diese Option ist etwas anders. Anstatt das Video direkt anzuzeigen, zeigen wir hier ein Thumbnail des YouTube-Videos an. Wenn Sie dann auf ein Miniaturbild klicken, wird Ihr Video im Popup-Fenster abgespielt. Dies kann mit einer Fancybox erfolgen.

Um Fancybox verwenden zu können, müssen Sie die folgenden CSS- und JS-Dateien in Ihre Website einbinden.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>

Geben Sie danach den unten stehenden Code ein und Sie sind fertig.

<a data-fancybox="" href="https://www.youtube.com/watch?v=VIDEO_ID">
    <img src="http://i3.ytimg.com/vi/VIDEO_ID/hqdefault.jpg" />
</a>

Lite YouTube-Einbettungen

In der ersten Methode haben wir Iframe-Code verwendet. Bei der Verwendung eines iframes muss der Browser fast 800 kB an Daten herunterladen, um ein Video zu rendern.

Mit fancybox können Sie diese Last reduzieren. Aber auch hier müssen Sie deren CSS und JS einbeziehen. Es wird empfohlen, diese Dateien über CDN hinzuzufügen, um die Serverlast freizugeben.

Während der Arbeit an diesem Thema bin ich auf einen Artikel gestoßen, der das Einbetten von YouTube-Videos auf andere Weise erklärt. Es muss weder beim Laden der Seite einen Iframe verwenden noch irgendwelche Dateien einschließen.

Der Artikel enthält Code, den jeder leicht zu seiner Anwendung hinzufügen kann. Bitte folge dem Artikel zu Lite YouTube Embeds und füge den Code wie vorgeschlagen hinzu.

Dies sind die 3 Möglichkeiten, ein responsives YouTube-Video einzubetten. Je nach Ihren Anforderungen können Sie eine der Lösungen auswählen.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net