HTML-5 Video ohne Lightbox so verlinken, dass Background alles überdeckt

  • Natürlich weiß ich, wie ich Videos in HTML-5 einbinde. Hier aber soll folgende Funktion erreicht werden:


    Es gibt einen Text oder ein Bild, aus dem heraus auf das Video verlinkt wird. Dieser Link sollte mittels CSS so gestaltet werden, dass das Video vor einem Background einer bestimmten Farbe startet und Video nebst Background über den vorher gesehenen Content zu liegen kommt z.B. durch Nutzung des z-Index. Das ganze wirkt dann ähnlich, wie eine Lightbox, soll aber rein durch CSS entstehen, das in dem Link aktiviert wird und ohne jedes JS.


    Frage ist das überhaupt möglich oder lässt der video-Tag gar keine Erweiterung mittels style=" " oder class=" " zu? Wenn doch, wie müsste der Link dann aussehen?

  • Mal ins Unreine gedacht:

    Ich könnte z.B. einen Link mit der vollen URL zum Video erstellen:

    <a href="https://meine-domain.de/images/video-1.mp4"Hier geht's zum Video</a> und setze dann hinter das <a class=" " oder eben style=" " und übergebe so die Definitionen, unter denen das Video dann im Browser laufen sollte.

  • OK. Mir ist durch Infos auf zwei anderen Websites klar geworden, dass ich mit einem Link zwar eine andere Website oder sogar ein Video aufrufen kann, nicht aber mit dem Link zusammen bereits Beschreibungen übergeben kann, wie die zu öffnende Seite aussehen soll.


    Ich bin halt nicht hauptberuflicher Joomla / CSS / JS -Mensch, sondern in einem Gesundheitsberuf tätig und muss meine Websites selbst erstellen.


    Ich habe gerade experimentell heraus gefunden, dass ich mein Vorhaben tatsächlich mit der JCE-Mediabox realisieren kann. Ein mit der Mediabox geöffneter Joomla-Artikel, egal ob der Inhalt per Ajax oder per iFrame in die Lightbox geholt wurde, darf durchaus seinerseits einen weiteren JCE-Mediabox-Link zu einem Video beinhalten - im Sinne einer Kaskade von zwei übereinander liegenden Lightboxen. Das Video wird immer zuverlässig in einer Lightbox geöffnet, bei Ajax mit seinen nativen Videoabmessungen, beim iFrame mit width = 100%.


    Damit ist meine Anfrage hier erledigt, weil ich damit eine Lösung gefunden habe.

    Danke für eure Geduld! :-)