Schnellere Einbettung von YouTube-Videos

    Vor kurzem hab ich mal ein Erklärbärvideo, das ich auf YT hoste, auf meiner Startseite eingebettet. Das sieht zwar hübsch aus, aber es kostete sehr viel Ladezeit und die YT-Scripte arbeiteten sich auch halb tot. Da Videos ja angeblich immer "wichtiger" werden für die Leute, muss man sich halt anpassen.
    Ich habe jetzt eine Lösung gefunden, wie man so ein iframe-Video einfach und vor allem so einbetten kann, das es einem die Ladezeit nicht runterzieht:

    Vorher:

    Code
    <iframe src="//www.youtube.com/embed/U3BAv7w0wYE" class="note-video-clip" width="590" height="360" frameborder="0"></iframe>



    Jetzt:

    Code
    <!-- Include the CSS & JS.. (This could be direct from the package or bundled) -->
<link rel="stylesheet" href="catalog/view/theme/journal3/stylesheet/lite-yt-embed.css" />
<script src="catalog/view/theme/journal3/js/lite-yt-embed.js"></script>
<!-- Use the element. You may use it before the lite-yt-embed JS is executed. -->
<lite-youtube videoid="U3BAv7w0wYE" style="background-image: url('image/cache/catalog/mainpage/video.jpg');" playlabel="Play: Seidenhandel Haller Video"></lite-youtube>

    Jetzt lädt erstmal nur das Vorschaubild video.jpg.

    Es wird im Grunde nur ein Play-Button über das Bild gelegt. Klickt man auf das Bild, dann lädt und startet der Clip.

    Gefunden habe ich die JS und CSS-Dateien hier (im Ordner src/): https://github.com/paulirish/lite-youtube-embed/tree/master
    Mehr braucht man dazu nicht.
    Beispiele und Erweiterungsmöglichkeiten sind auch aufgeführt.

    Vorteile bzgl. der Ladezeiten dürften klar sein.
    Außerdem kann man ein beliebiges Bild als Hintergrund nehmen^^

    Wer zuerst "Datenschutz" sagt, hat verloren.

    Nettes Script.

    Ich möchte nichts sagen, aber das geht sogar noch viel einfacher, ganz ohne externe Scripte.

    Gib bei dem Iframe einfach das "srcdoc" mit an. Da kannst auch alles mögliche mit kreieren. Also z.B: ein Srcdoc, das seinerseits ein Bild mit einem Link zum eigentlichen Video enthält. Das Dreieck als Play-Button kannste ganz einfach mit CSS über das Bild legen. Per srcdoc kannste innerhalb vom Iframe alles machen, was auf einer normalen Seite auch machbar ist. ;)

    Im Iframe wird dann nur das Bild mit dem Link aus dem srcdoc angezeigt (<a href="linkzumVideo"><img src="bildvom Video"></a>), gestartet wird erst, wenn man klickt.

    Oder Du nutzt als src nicht direkt Youtube, sondern ein eigenes Script. Das auch nix anderes macht, als das Bild von YT + Link + Dreieck anzuzeigen.

    Im Grunde funktionieren auch die Datenschutz-Dinger so, wo man erst klicken muss. Zuerst wird das srcdoc geladen mit dem Hinweis, dass man doch klicken soll und der Link ist dann mit dem eigentlichen Ziel verknüpft.

    Nachteil mit dem Script oben ist halt, auch wenn es nett ausschaut, dass Google das Video auf der Seite nicht findet, denn es ist ja quasi gar nicht da.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    Also_

    Code
    <iframe srcdoc="mein-bild.jpg" src="//www.youtube.com/embed/U3BAv7w0wYE" class="note-video-clip" width="590" height="360" frameborder="0"></iframe>

    und das wars?

    Wer zuerst "Datenschutz" sagt, hat verloren.

    Ähm, nein. Ins srcdoc muss HTML-Code. So was etwa:

    Code
    <iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/U3BAv7w0wYE"
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:65px/1.5 sans-serif;color:white;text-shadow:0 0 .75em black}</style><a href=https://www.youtube-nocookie.com/embed/U3BAv7w0wYE?autoplay=1&playsinline=1><img src=https://img.youtube.com/vi/U3BAv7w0wYE/hqdefault.jpg><span>▶</span></a>"
frameborder="0"
allowfullscreen
title=""
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
></iframe>

    Da ist also das "style" drinnen, das Bild mit Link und ein Pfeil zum Abspielen. CSS dafür, dass der Pfeil mittig ist und eben das Bild vollflächig angezeigt wird. Kann man aber auch mit spielen wie man mag.

    Bei Deiner Lösung fehlt mir aktuell zumindest eine Sache, ist mir aber erst später aufgefallen. Man kann das Video, wenn es mal gestartet wurde, nicht wieder beenden, pausieren, lauter / leiser machen, Vollbild oder sonst was. Da gibt es keine Steuerungselemente, das läuft einfach bis zum Ende oder man muss das Fenster schließen / reloaden.

    Was man natürlich auch machen kann, um das direkte Laden zu verzögern, ist beim normalen Iframe einfach ein "loading="lazy". Das geht ja nicht nur mit BIldern, sondern auch mit Iframes.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    Also ich hab jetzt das da. Das scheint zu funktionieren, ganz ohne scripte.

    Code
    <iframe width="590" height="360" src="https://www.youtube-nocookie.com/embed/U3BAv7w0wYE?si=xV7aWod3r2LlPTGB" 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:65px/1.5 sans-serif;color:white;text-shadow:0 0 .75em black}</style><a href=https://www.youtube-nocookie.com/embed/U3BAv7w0wYE?autoplay=1&playsinline=1><img src=https://img.youtube.com/vi/U3BAv7w0wYE/hqdefault.jpg><span>▶</span></a>"title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

    Wer zuerst "Datenschutz" sagt, hat verloren.