Videos datensparsam in Responsive Design anzeigen - wie geht das?

Nach vielen vergeblichen Experimenten mit vorgefertigten Templates, die mich alle nicht zufrieden stellten, komme ich doch wieder auf „handgemachte“ Lösungen zurück und frage hier, ob jemand zu folgenden Fragen bereits CSS-Code in Benutzung hat:

1.) Abhängig von "screenwidth" soll aus drei oder vier bereit gestellten Video-Bildgrößen (270p 360p 540p 720p) automatisch das größte ausgewählt werden, das noch in "screenwidth" hinein passt. Ich weiß, dass ich hier mit Konstruktionen arbeiten muss wie:

@media screen and (max-width: 700px) {
.....
}

@media screen and (min-width: 700px) {
.....
}

aber wie ich die o.g. screenwidth-Konditionen fest mit jedem video-tag verknüpfe und dann im Link in einem Beitrag die jeweils passenden Videos auswähle, das weiß ich nicht.

2.) Damit der Website-Besucher die Orientierung nicht verliert und nach Betrachten des Video wieder im Beitrag landet, in dem das Video präsentiert wurde, soll das Video als "Shadow-Box" / "LIght-Box" über den geöffneten Beitrag gelegt werden, sodass der ganze Screen abgedunkelt wird und das Video mit seiner maximal möglichen Breite darin abgespielt wird - möglichst auch neu skalierend, wenn z.B. das Abspielgerät (Smartphone) von Hochformat auf Querformat gedreht wird.

Solch eine Funktion bietet mir z.B. die JCE-Mediabox, die im kostenlosen JCE als PlugIn enthalten ist. Allerdings müsste der Link, mit dem die JCE-Mediabox mitsamt dem Video aufgerufen wird, bereits mit den CSS-Konditionen gemäß Punkt 1 verbunden sein. Und das ist meine zweite Schwierigkeit.

Oder gibt es bereits ein "Video-Plugin" für Joomla, das genau diese Funktionen bietet? Auch bei gründlicher Suche habe ich im JED nichts passendes gefunden.

Während ich weiter nach Lösungen suche, finde ich immer Hinweise, Videos zu skalieren. Wie z.B. hier:

https://www.drweb.de/videos-responsiv/

Das ist ja alles ganz schön, aber ein hoch skaliertes Video sieht einfach matschig aus. Und mein Wunsch, das Video in einer Lightbox darzustellen, ist darin ja ebenfalls nicht enthalten.

Ideal wäre, wenn ich eine class in CSS definieren könnte, die bereits die ganzen @media-Definitionen und den Lightbox-Start mit beinhaltet und ich nur noch den Link zu den drei oder vier Videos einfügen muss.

Ich möchte gute Videoqualität ausliefern, aber bei kleinen Anzeigeformaten natürlich die Datenrate klein halten, weil es sich dann vermutlich um Mobilgeräte handelt. Deshalb bin ich ja bereit, jedes Video in drei oder vier verschiedenen Pixelgrößen auszuliefern.

Herzlichen Dank dir!

Die beiden Links zu "video-srcset" finde ich wirklich interessant. Da muss ich mal schauen, wie ich das einbaue, besonders betr. der Kombination mit der Lightbox.

Bin sehr gespannt, wie ich das hin kriege!

Die Lösung "Mobile-Detect" finde ich nicht so überzeugend, da es immer mehr Smartphones mit hoch auflösenden Displays gibt und die Besucher sicher gerne eine scharfe Videoqualität wünschen.

Eigentlich müsste es eine Erkennung geben, um festzustellen, ob der Besucher eine Mobilfunkverbindung nutzt, um ihm dort hohe Datenraten zu ersparen. Über WLAN würde dann die zum Display passende hohe Auflösung ausgeliefert.

Hallo!

Hab gerade eine viel einfachere Lösung entdeckt, die allein mit CSS bzw. dem video-tag auskommt:

https://www.mediaevent.de/tutorial/web-video.html

Daraus ein Code-Beispiel:

<video controls> 
   <source src="video-large.mp4" type="video/mp4" media="all and (min-width:680px)"> 
   <source src="video-small.mp4" type="video/mp4" media="all and (min-width:320px)">  
</video>

Jetzt muss ich das noch mit der JCE-Mediabox kombinieren und die Sache ist rund.

Merkwürdig. Hab es genau nach obiger Vorlage (ohne JCE-Mediabox) eingefügt und der Browser wählt immer das oberste / erste Video und reagiert demnach nicht auf die Branch-Konditionen.

Ich hab den Code in W3.CSS geprüft aber keinen Fehler gefunden. In Joomla und im Server / der Joomla-htaccess ist der Cache deaktiviert, sodass auch immer jeder Änderungsversuch an den Browser (Firefox) ausgeliefert wird.

Meine Videos hoste ich selbst und deren URL liegt im Joomla-image-Verzeichnis.

Woran könnte der Fehler liegen?

Hab den Code modifiziert mit einer "style"-Anweisung und jetzt funktioniert es mit der Branch-Kondition für die ersten beiden Videos, aber nicht für das dritte:

<video controls style="max-width: 100%; height: auto;">
   <source media="min-width:620px" src="images/vids/intro/ll-intro-960-540.mp4" type="video/mp4" > 
   <source media="min-width:400px" src="images/vids/intro/ll-intro-640-360.mp4" type="video/mp4" > 
   <source media="min-width:320px" src="images/vids/intro/ll-intro-480-270.mp4" type="video/mp4" > 

Könnte es sein, dass das Ganze nur mit maximal zwei Konditionen funktioniert?

...sorry das war ein Versehen. Vielleicht habe ich ja auch einen logischen Denkfehler bei der Angabe der min-width?

Den habe ich auch durch Veränderung der min-width-Werte nicht lösen können:

<video controls style="max-width: 100%; height: auto;">
   <source media="min-width:980px" src="images/vids/intro/ll-intro-960-540.mp4" type="video/mp4" > 
   <source media="min-width:660px" src="images/vids/intro/ll-intro-640-360.mp4" type="video/mp4" > 
   <source media="min-width:530px" src="images/vids/intro/ll-intro-480-270.mp4" type="video/mp4" >  
</video>

Wenn der Viewport größer 980px, wird das 960px breite Video aktiviert, größer 660px das zweitgrößte Video mit 640px Breite und wenn der Viewport noch kleiner ist, soll das Video mit der kleinsten Breite von 480px aktiviert werden. Vielleicht brauche ich ja die letzte Branch gar nicht?

Evtl. ist es auch aktuell zu spät für solche Logik? Denn ich will ja auch vermeiden, dass die Videos hoch skaliert werden, wenn der Viewport breiter ist. Und das widerspricht sich doch anscheinend. - Ich blick's grad nicht.

Hallo Re:Later, ich bin ziemlich überrascht, dass in der von mir verlinkten Quelle genau diese Media-Query innerhalb des video source empfohlen wird:

https://www.mediaevent.de/tutorial/web-video.html

Ich danke dir, dass du den Fehler aufgedeckt und mir genannt hast!

Heute habe ich schon wieder einen halben Tag an der Video-Lösung gebastelt und dabei deine Anregungen aus Posting 3 verfolgt. – Aber ich muss wohl hinnehmen, dass hier die Grenzen liegen für's Selbstmachen und ich werde nun jemanden mit dieser Aufgabe beauftragen.

Ich markiere diesen Thread als erledigt, weil anscheinend dein Beitrag Nr. 3 zur Lösung führt.

Nun bin ich wieder ein Stückchen weiter gekommen: Meine Produktiv-Website, die mich ja auch ständig bei Arbeiten im Backend ausloggt, hatte eine offensichtlich veraltete JCE-Version und auch die Mediabox war veraltet. So wurden Videos in der Lightbox nicht skaliert.

Immerhin ist jetzt auf der Homepage das wichtigste Video zu sehen. Dafür hat es mir alle anderen Lightboxen, in denen Text dargestellt wird, verunstaltet.

Aktuell ist jetzt das Video auf der Hauptseite, etwa in der Mitte zu sehen: https://lebenslust-jetzt.de
Der Text zu meinen Konditionen, der ebenfalls in der Lightbox gezeigt werden sollte, wird dagegen chaotisch angezeigt. – Es wird Zeit, die ganze Site neu zu machen und auch neu zu gestalten.

In einer "Konversation" in diesem Forum gab mir JoomlaWunder einen wertvollen Tipp, den ich direkt weiter interpretiere:

Für jedes Video will ich ja 3 Abmessungen bereit stellen, abhängig von der Breite des Viewport. Klickt man das Vorschaubild an, so öffnet die Lightbox (JCE-Mediabox) und zeigt darin das Video.

Gemäß Tipp von JoomlaWunder wird abhängig von der Viewport-Breite immer nur einer der drei Links mitsamt Vorschaubild in der Webseite sichtbar. Der Besucher kann also immer nur das Video mit der für ihn passenden Abmessung anklicken.

Es ist also zwar mehr Arbeit, immer drei Links mitsamt Konditionen in die Seite einzupflegen. Aber wenn ich doch zurzeit keine komfortable Lösung mit JS und CSS bekommen kann, ist es doch prima, dass ich diese Lösung aber selbst zusammen basteln kann.

Damit sehe ich dieses Thema als "gelöst" an.