Das ist eine sehr clevere Idee von Arthur Corenzan. Anstatt das Standard-YouTube-Embed zu verwenden, das eine Menge Ressourcen auf einer Seite lädt, unabhängig davon, ob der Benutzer das Video abspielt oder nicht, verwendet man die winzige Platzhalter-Webseite, die nur ein Bild ist, das man anklicken kann und das mit dem YouTube-Embed verlinkt ist.
Es verhält sich im Wesentlichen genau gleich: anklicken, Video an Ort und Stelle abspielen.
Der Trick basiert auf srcdoc, einer Funktion von <iframe>, mit der man den gesamten Inhalt eines HTML-Dokuments in das Attribut einfügen kann. Es ist wie Inline-Styling, aber auf der Ebene eines Inline-ganzen-Dokuments. Ich habe es schon früher verwendet, als ich von MailChimp erstellte Newsletter auf dieser Seite eingebettet habe. Ich habe die E-Mail als vollständiges HTML-Dokument in der Datenbank gespeichert, bei Bedarf abgerufen und in ein <iframe> mit srcdoc eingefügt.
Arthur dankt Remy für eine Anpassung, um es unter IE 11 zum Laufen zu bringen, und Adrian für einige Accessibility-Anpassungen.
Ich stimme Hugh in den Kommentaren zu diesem Beitrag ebenfalls zu. Jetzt, da Native Lazy Loading in Chrome eingeführt wurde (siehe unsere Berichterstattung), können wir auch loading="lazy" hinzufügen, da dies keine Anfragen bedeutet, wenn es außerhalb des Viewports gerendert wird.
Ich werde hier auch eine Demo einbetten
Leser Tracey Rich sagte, sie hätten ► anstelle des Unicode-Play-Buttons verwenden müssen.
Wie der Autor sagt: "es funktioniert nicht auf dem Handy", und gerade auf dem Handy wäre das Lazy Loading von YouTube-Iframes am nützlichsten.
https://dev.to/haggen/comment/ebn3
Hallo Andy! Ich würde nicht sagen "es funktioniert nicht auf dem Handy", weil das meiste davon funktioniert. Nur das Autoplay funktioniert nicht, und der Benutzer muss erneut klicken, da der erste Klick nur zum Laden des Videos diente. Es spart immer noch den Müll, der sonst heruntergeladen würde, und besonders für Mobilgeräte könnten diese 500 KB schmerzhaft sein.
Es lädt immer noch das ...www-embed.../www-embed-player.js und en_US/base.js, da es sich um einen iframe handelt.
Auch wenn es für mehrere Videos auf einer Seite verwendet wird, lädt der iframe beide Dateien mehrmals. Wie kann man das verhindern? Div statt iframe verwenden?
Sehr, sehr cool, ich habe viel JavaScript ausprobiert
Aber dieser Code ist einfach und das Ergebnis ist großartig
Vielen Dank, das hat wirklich geholfen
Vielen Dank, ich habe es auf meiner Website https://oraciondelamanana3.com angewendet und es hat funktioniert, ABER ich habe festgestellt, dass der gesamte Inhalt, der direkt nach dem Video kommt, verschwindet, und ich weiß nicht, warum das passiert oder wo der Inhalt verschwindet.
In der URL -> https://oraciondelamanana3.com sehen Sie, dass es ein Video gibt und darunter Inhalt und sogar verwandte Einträge.
Aber wenn ich diesen Code für Videos verwende, verschwindet unmittelbar nach dem Video der gesamte Inhalt -> https://gyazo.com/e025c053fa0c2b4e8eabf0dcce6fb9da
Gibt es eine Möglichkeit, das Lazy Loading für YouTube so zu gestalten, dass der Inhalt nicht beschädigt wird, bitte?
Ich habe festgestellt, dass das Deaktivieren meines Ad-Blockers dazu führte, dass diese Methode immer wieder eine Konsolenfehlermeldung auswarf (mehrfach pro Sekunde), bis der iframe angeklickt wurde.
Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://www.youtube.com’) does not match the recipient window’s origin (‘https://www.mydomain.com’).
Ich habe versucht, enablejsapi=1 und origin=https://www.mydomain.com zur Embed-URL hinzuzufügen, aber beides verhinderte den Fehler nicht. Hat sonst noch jemand dieses Problem?
Bitte schauen Sie sich https://github.com/paulirish/lite-youtube-embed an, das gerade von Paul Irish @ Chrome Dev Summit 2019 angekündigt wurde. Es verwendet ein benutzerdefiniertes Element und rendert nur das Vorschaubild. Skripte und Embed werden geladen, wenn Sie auf die Wiedergabetaste klicken.
Diese Methode spielt jetzt nicht mehr automatisch ab. Benötigt zwei Klicks, um das Video abzuspielen (zumindest in Chrome).
Es scheint, dass mit
&autoplay=1am Ende der ursprünglichen iframe-srces funktioniert. Ich habe das Embed aktualisiert, um das zu haben.Es scheint, dass das Hinzufügen von &autoplay=1 oder ?autoplay=1 in Chrome und Safari nicht mehr funktioniert. In Firefox funktioniert es.
Hmm, es funktioniert in Chrome + Safari, wenn Sie &mute=1 zu &autoplay=1 hinzufügen. Aber das ist nicht das erwartete Verhalten, wenn ein Benutzer auf Play klickt, also ist das auch ärgerlich.
Sie müssen dies hinzufügen...
Coole Methode! Ich habe das implementiert, mit dem Unterschied, dass es keine Pfeil-CSS gibt; stattdessen gibt es beim Hover einen schnellen JS-Klick. Das bedeutet, dass das Vorschaubild zunächst geladen wird, und wenn Sie mit der Maus darüber fahren, wird das Embed geladen, und wenn Sie geduldig genug sind, können Sie nach einer Weile auf > klicken.
Immer noch zwei Taps auf Touch-Geräten, aber zumindest bricht die Seite nicht zusammen, wenn man Dutzende von Videos hat.