Lazy Load für Videos

[woeppel]

In unseren Shops sind viele Videos (vorwiegend Youtube) eingebunden. Diese verzögern natürlich die Ladegeschwindigkeiten der Seiten.
In unseren Wordpress Seiten haben wir ein Plugin dafür. Dadurch laden die Seiten super schnell.
Hat jemand so etwas schon umgesetzt?

modified eCommerce Shopssoftware v2.0.4.2 rev 11374
Bootstrap 3 Template Karl

Viele Grüsse
Markus

Linkback: https://www.modified-shop.org/forum/index.php?topic=41128.0

[hpzeller]

Hallo Markus,

ein Plugin für modified welches das leistet kenne ich nicht, aber vielleicht reicht dir auch folgender Link.
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video#lazy_loading_video

Gruss
Hanspeter

[Timm]

Nicht die Fragestellung, aber vielleicht auch interessant und wichtig, falls das mal später jemand über die Suche findet.

Hier hatte @hpzeller gezeigt, wie man videos responsive einbindet:

YoubeTube Video responsive in 2.0 einbinden

@hpzeller
Könnte man das nicht wie bei Bildern mit der  Klasse unveil umsetzen?

video class=unveil src=loading.gif data-src=video url

Gruß Timm

[hpzeller]

[...]
@hpzeller
Könnte man das nicht wie bei Bildern mit der  Klasse unveil umsetzen?
[...]

Also ich kann hier -> https://luis-almeida.github.io/unveil/ bezüglich nachladen von Videos nichts finden, und ausserdem schreibt Markus, dass er das Bootstrap 3 Template von Karl im Einsatz hat, und dort ist, soviel ich weiss, das Unveil Plugin nicht implementiert.

Gruss
Hanspeter

[woeppel]

Was ich bisher zur Lösung gefunden habe ist.

1.) Bei Chrome funktioniert anscheinend das Attribute

<iframe  loading="lazy"

Wenn ich jedoch das in Pagespeed überprüfe wird mir die Ladezeit von Youtube immer noch angemeckert.

2.) https://github.com/davehold/OnClickVideo

Wäre das ein Ansatz, eine Lösung, umsetzbar? Wobei ich so ein Vorschaubild  für den Besucher nicht interesant wirkt.

3.) Folgendes Script Beispiel habe ich noch nicht ausgetestet:

Code: PHP  [Auswählen]

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/Y8Wp3dafaMQ"
  srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
></iframe>
 

Viele Grüsse
Markus

[hpzeller]

Nachtrag: Für per iframe-Tag eingebettete Youtube-Videos wäre wohl folgender Link eher hilfreich.
https://github.com/vb/lazyframe

Gruss
Hanspeter

[woeppel]

Hallo Timm, hallo Hanspeter,

danke für Eure Mühe.

Ich habe diese smarte Version erfolgreich getestet. Bringt bei Pagespeed eine ca 10 Punkte Verbesserung.

Code: PHP  [Auswählen]

<div class="elastic-video-wrapper">
<div class="responsive-video"><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/8mcXd0ZaPd0" srcdoc="&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}&lt;/style&gt;&lt;a  data-cke-saved-href=https://www.youtube.com/embed/8mcXd0ZaPd0?autoplay=1 href=https://www.youtube.com/embed/8mcXd0ZaPd0?autoplay=1&gt;&lt;img  data-cke-saved-src=https://img.youtube.com/vi/8mcXd0ZaPd0/hqdefault.jpg src=https://img.youtube.com/vi/8mcXd0ZaPd0/hqdefault.jpg alt='Bodypainting Farbe'&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;" title="Die Auswahl der Bodypainting Farbe" width="560"></iframe></div></div>

 

Viele Grüsse
Markus