Vorschaubild als Platzhalter dynamisch einbinden?

[Christiane2]

Hallo, auch ich habe das Script erfolgreich in einen reinen CSS-Slider für Videos eingebunden. Klappt super - danke für das tolle Script!

Die Video-Wall (Disclaimer + Start-Button) habe ich auch nach meinen Vorstellungen angepasst. Noch besser fände ich es jetzt, wenn bei jedem Video-Slide statt dem reinen Text plus Film-ab-Button auch schon ein Vorschaubild im Hintergrund zu sehen wäre (nicht per Youtube, sondern über unseren Server). Hätte ich nur ein Video, wäre das ja kein Ding. Aber im Slider stecken derzeit vier Youtube-Links. Diese eigenen Vorschaubilder müssten wohl genauso dynamisch per js zugeordnet werden, wie das ja auch bei den Videos geschieht. Geht das? Bin leider recht ahnungslos, was js angeht :)

[a-v-l]

Hallo @Christiane2,

rein theoretisch wäre das kein Problem. Man könnte z.B. die Vorschaubilder von YouTube einbinden. Die liegen auf https://i.ytimg.com/vi/video-ID/hqdefault.jpg. Das Problem dabei ist, dass damit erstens wieder eine Verbindung zu einem fremden Server aufgebaut wird (das will man ja gerade verhindern) und zweitens ist es urheberrechtlich fragwürdig.

Trotzdem hatte ich auch schon an so eine Option gedacht. Dabei müssten die Bilder allerdings auf dem eigenen Server liegen und am besten die Video-ID als Namensbestandteil haben. Ich kann mir die Tage mal eine Umsetzung überlegen!

[Christiane2]

Hallo a-v-l,

danke für deine Antwort. Ja, so hatte ich mir das vorgestellt - eigene Screenshots auf dem eigenen Server. Ich wollte ja schon diesen replace-Befehl fürs Video einfach kopieren, auf ein (Hintergrund-?)Bild umfunzeln und damit die Befehlskette im js erweitern. Aber wie gesagt: Mir fehlt dafür die ausreichende Ahnung von js - ich erkenne nicht, was da alles für diese Funktion vonnöten wäre.

[maxbachmann]

btw https://nextcloud.com/blog/encryption-in-nextcloud/ bindet auch entsprechend die Bilder ein. Da kannst du dir eine entsprechende Implementierung anschauen. Mache das gerade auch für meine Webseite ;)

[a-v-l]

btw https://nextcloud.com/blog/encryption-in-nextcloud/ bindet auch entsprechend die Bilder ein. Da kannst du dir eine entsprechende Implementierung anschauen. Mache das gerade auch für meine Webseite ;)

Die verwenden eben gerade ytimg.com als background-image:

<p class="youtube_container"></p>
    <article style="background: url(https://i1.ytimg.com/vi/sMOZf4GN3oc/maxresdefault.jpg);">
        …
    </article>
</p>

Das wollen wir mit diesem Script doch gerade verhindern…