Lite YouTube Embeds - Eine bessere Methode zum Einbetten von YouTube-Videos auf Ihrer Website

Es ist einfach, ein YouTube-Video einzubetten, aber Sie werden überrascht sein, wie viel zusätzliches Gewicht eine einzelne YouTube-Videoeinbettung zu Ihren Webseiten hinzufügen kann. Allein für die Wiedergabe des YouTube-Videoplayers muss der Browser ~800 kB an Daten herunterladen (siehe Screenshot). Und diese Dateien werden heruntergeladen, noch bevor der Besucher auf die Wiedergabeschaltfläche geklickt hat.

Das eingebettete YouTube-Video erhöht nicht nur die Bytegröße Ihrer Webseiten, sondern der Browser muss mehrere HTTP-Anforderungen stellen, um den Videoplayer wiederzugeben. Dies erhöht die Gesamtladezeit Ihrer Seite und wirkt sich somit auf die Seitengeschwindigkeit und den Core Vitals Score Ihrer Website aus.

Der andere Nachteil des standardmäßigen YouTube-Einbettungscodes besteht darin, dass er einen Videoplayer mit festen Abmessungen rendert und nicht reagiert. Wenn Personen Ihre Website auf einem Mobiltelefon anzeigen, wird die Größe des Videoplayers möglicherweise nicht richtig für den kleinen Bildschirm angepasst.

Betten Sie YouTube-Videos ein, ohne die Seitengröße zu erhöhen

Das inzwischen nicht mehr existierende Google+ verwendete eine sehr clevere Technik zum Einbetten von YouTube-Videos. Beim ersten Laden der Seite bettete Google+ nur das Miniaturbild des YouTube-Videos ein und der eigentliche Videoplayer wurde nur geladen, wenn der Benutzer auf die Miniaturansicht klickte.

Das Thumbnail-Frame-Bild von YouTube-Videos ist etwa 15 kB groß, sodass wir die Größe von Webseiten um fast ein MB reduzieren können.

Lite YouTube Embed-Demo

Öffnen Sie diese Demoseite, um die Google+-Technik in Aktion zu sehen. Das erste Video der Seite wird mit dem Standard-IFRAME-Code eingebettet, während das zweite Video den Lite-Modus verwendet, der das YouTube-Video nur bei Bedarf lädt.

Wenn ein Benutzer auf die Wiedergabeschaltfläche klickt, wird das Miniaturbild durch den standardmäßigen YouTube-Videoplayer ersetzt, wobei die automatische Wiedergabe auf 1 eingestellt ist, sodass das Video fast sofort abgespielt wird. Der große Vorteil ist, dass das zusätzliche YouTube-JavaScript nur geladen wird, wenn sich jemand entscheidet, das eingebettete Video anzusehen, und sonst nicht.

Leichte und reaktionsschnelle YouTube-Einbettungen

Der standardmäßige Einbettungscode für YouTube verwendet das IFRAME-Tag, bei dem die Breite und Höhe des Videoplayers festgelegt sind, sodass der Player nicht mehr reagiert.

Der neue On-Demand-Einbettungscode für YouTube ist responsiv und passt die Abmessungen des Players automatisch an die Bildschirmgröße des Besuchers an.

YouTube-Videos responsiv einbetten – Tutorial

Schritt 1: Kopieren Sie das folgende HTML-Snippet und fügen Sie es überall auf Ihrer Webseite ein, wo das YouTube-Video erscheinen soll. Denken Sie daran, VIDEO_ID durch die tatsächliche ID Ihres YouTube-Videos zu ersetzen.

 < div class = " youtube-player " data-id = " VIDEO_ID " > </ div >

Höhe und Breite werden nicht zugewiesen, da der Videoplayer automatisch die Breite des übergeordneten Elements einnimmt, während die Höhe automatisch berechnet wird. Sie können auch mehrere DIV-Blöcke mit unterschiedlichen Video-IDs einfügen, wenn Sie mehrere YouTube-Videos auf derselben Seite einbetten müssen.

Schritt 2: Kopieren Sie das JavaScript und fügen Sie es an einer beliebigen Stelle in Ihrer Webvorlage ein. Das Skript findet alle eingebetteten Videos auf einer Webseite und ersetzt dann die DIV-Elemente durch die Video-Thumbnails und einen Play-Button (siehe Demo).

 < script > /* * Light YouTube Embeds by @labnol * Credit: https://www.labnol.org/ */ function labnolIframe ( div ) { var iframe = document . createElement ( 'iframe' ) ; iframe . setAttribute ( 'src' , 'https://www.youtube.com/embed/' + div . dataset . id + '?autoplay=1&rel=0' ) ; iframe . setAttribute ( 'frameborder' , '0' ) ; iframe . setAttribute ( 'allowfullscreen' , '1' ) ; iframe . setAttribute ( 'allow' , 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' ) ; div . parentNode . replaceChild ( iframe , div ) ; } function initYouTubeVideos ( ) { var playerElements = document . getElementsByClassName ( 'youtube-player' ) ; for ( var n = 0 ; n < playerElements . length ; n ++ ) { var videoId = playerElements [ n ] . dataset . id ; var div = document . createElement ( 'div' ) ; div . setAttribute ( 'data-id' , videoId ) ; var thumbNode = document . createElement ( 'img' ) ; thumbNode . src = '//i.ytimg.com/vi/ID/hqdefault.jpg' . replace ( 'ID' , videoId ) ; div . appendChild ( thumbNode ) ; var playButton = document . createElement ( 'div' ) ; playButton . setAttribute ( 'class' , 'play' ) ; div . appendChild ( playButton ) ; div . onclick = function ( ) { labnolIframe ( this ) ; } ; playerElements [ n ] . appendChild ( div ) ; } } document . addEventListener ( 'DOMContentLoaded' , initYouTubeVideos ) ; </ script >

Schritt 3: Kopieren Sie das CSS und fügen Sie es vor dem schließenden Head-Tag Ihrer Webvorlage ein.

 < style > .youtube-player { position : relative ; padding-bottom : 56.25% ; height : 0 ; overflow : hidden ; max-width : 100% ; background : #000 ; margin : 5px ; } .youtube-player iframe { position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; z-index : 100 ; background : transparent ; } .youtube-player img { object-fit : cover ; display : block ; left : 0 ; bottom : 0 ; margin : auto ; max-width : 100% ; width : 100% ; position : absolute ; right : 0 ; top : 0 ; border : none ; height : auto ; cursor : pointer ; -webkit-transition : 0.4s all ; -moz-transition : 0.4s all ; transition : 0.4s all ; } .youtube-player img:hover { -webkit-filter : brightness ( 75% ) ; } .youtube-player .play { height : 72px ; width : 72px ; left : 50% ; top : 50% ; margin-left : -36px ; margin-top : -36px ; position : absolute ; background : url ( '//i.imgur.com/TxzC70f.png' ) no-repeat ; cursor : pointer ; } </ style >

Auf dieser Codepen-Seite können Sie die leichte YouTube-Einbettungstechnik in Aktion sehen.

Bitte beachten Sie, dass Chrome- und Safari-Browser auf iPhone und Android nur die Wiedergabe von HTML5-Videos zulassen, wenn sie durch eine Benutzerinteraktion initiiert werden. Sie blockieren die automatische Wiedergabe eingebetteter Medien, um unerwünschte Downloads über Mobilfunknetze zu verhindern.

YouTube-Einbettungs-Tutorials

1. Betten Sie ein YouTube-Video mit stummgeschaltetem Ton ein
2. Platzieren Sie YouTube-Videos als Hintergrund Ihrer Webseite
3. Betten Sie nur einen Teil eines YouTube-Videos ein