"Elastic Video" im Widget "Quelltext" oder Alternativlösung möglich?

Guten Abend!

Dies ist mein erster Beitrag, nachdem ich nun zwei Tage erfolglos versuchte, das nachfolgende Problem zu lösen.

Vorab ein großes Lob an das Team! Ich hatte mich nach langer Recherche für die Business Edition des ZP entschieden. Als bei der Online Bestellung ein Fehler auftrat griff ich zum Telefon und: Hatte den Boss persönlich am Rohr! Der löste das Problem unbürokratisch, ich konnte prompt loslegen und hatte nach wenigen Tagen den ersten klassischen Webauftritt erfolgreich fertig gestellt. Dabei halfen auch viele der Forumsbeiträge - danke an alle!

Das Problem:

Auf der neuen Website (responsive) sollen Texte, Bilder und Videos mit künstlerischem Inhalt im selben look & feel dargeboten werden. Texte und Bilder sind kein Problem, die Videos wie befürchtet allerdings. Aus gleich mehreren Gründen verwende ich Youtube & Co. nicht, d.h. meine Einbindung basiert aktuell auf einer Hinterlegung der Videodateien am Webserver und dem Aufruf von <video> in "Quelltext Widgets", wie im Forum mehrfach beschrieben. Das funktioniert technisch, sieht aber je nach Skalierung, Browser und Endgerät teilweise recht unterschiedlich aus. Um ein annähernd gleichartiges Verhalten zu erreichen, möchte ich folgendes sicherstellen:

1. horizontal zentrierte Positionierung des Players
   (unabhängig vom Endgerät und auch davon, ob darüber ein Ein- oder Mehrspalten-Design verwendet wird)
2. Maximalbreite bei Desktopdarstellung=Kopfbildbreite
3. lineares Skalieren (Breite und Höhe) des Videoplayers
   (analog zu jenem bei Texten und Bildern)

Dass das gewünschte Verhalten offenbar einfach erreicht werden kann (wenn man weiß, was man tut), beweisen zahlreiche Beiträge im Netz (siehe z.B. https://www.elmastudio.de/css-tipp-einge…gns-optimieren/ bzw. das Beispielvideo unter https://webdesignerwall.com/demo/elastic-v…tml5-video.html)

Das Ergebnis meiner eigenen Mühen findet sich auf einer Testseite unter http://www.teichmann.wien.

• Einbindung eigenes Video
• darunter Einbindung Vimeo-Player
  (analog zum o.a. Demovideo)
• darunter Einbindung zweier klassisches Bildelemente
  (um das gewünschte Verhalten deutlich zu machen)

Eigentlich funktioniert es weitestgehend wie erhofft, nur skaliert das Widget "Quelltext" in der Höhe nicht, sondern bleibt statisch. Am iPhone ist das Vorschaubild des Videos zu klein, das denke ich bekommt man mit einem Vorschaubild hin.

Ich freue mich auf ihren/euren Input zur Lösung!

Danke im Voraus und herzliche Grüße aus Wien,

Gregor Teichmann

Hallo und danke für die schnelle Reaktion! Hier der Code:

<div class="elastic-video-wrapper">
<div class="elastic-video">
<iframe
src="http://teichmann.wien/media/files/produce.mp4"
width="890" height=500 frameborder="0">
Your browser does not support the video tag.
</iframe>
</div>
</div>

Die Inline CSS Eintragung lautet:

max-width: 100%; height: auto;

Ich habe heute nochmal nachgelesen und festgestellt, dass die elastische Skalierung insbesondere darauf beruht, dass man dem "äußeren Container" entsprechende Eigenschaften verpasst. Ich glaube, genau das fehlt bei mir.

LG, Gregor

I'm Back again:

Ja, ich möchte die Videos randlos wie die Bilder. Zentriert und auf die richtige Breite skaliert - insbesondere bei Darstellung auf Smartphones, da ich davon ausgehe, dass die Seite hauptsächlich mit Smartphones genutzt wird.

Gregor

Zum Widget Videoplayer: Das Macht am iPhone mit dem Safari Browser Probleme:

Ohne einem Startbild sieht man nur den "Play-Button" auf leerem Hintergrund, mit "poster-Eintrag" skaliert das Startbild in Abhängigkeit von der tatsächlichen Videogröße, d.h. es wird breiter als die Texte und Bilder.

Gregor

Hier ein paar Screenshots zur Verdeutlichung. Das Widget verhält sich grundsätzlich so wie ich es brauche, nur in der Hochformat-Darstellung auf Smartphones (=häufigster Anwendungsfall) passt die Breite nicht:

iPhone8, Safari (Initialaufruf ohne Startbild, Hochformat):

iPhone8, Safari (nach Durchlauf des Videos ohne Startbild, Hochformat):

iPhone8, Safari (nach Durchlauf des Videos ohne Startbild, Querformat):

Samsung Galaxy, Chrome (nach Durchlauf des Videos ohne Startbild, Hochformat):

Samsung Galaxy, Chrome (nach Durchlauf des Videos ohne Startbild, Querformat):

Zitat von elch

Hallo masch

Ich sehe keinen Rand  

Wir warten mal auf TOK-P8.

Viele freundliche Grüsse in die Welt

elch

Korrekt, das Widget ist randlos, Masch hat das Problem erkannt - siehe Screenshots oben.

Hallo Maik,

die Videos werden 1280x720 groß sein. Und ja, bis auf den Rand in der Hochformat Darstellung, der dir auch aufgefallen ist (siehe Screenshots) tut das Widget grundsätzlich, was es soll. Ich denke, es schaltet unterhalb einer bestimmten Bildschirmbreite um und genau dort entsteht dann plötzlich ein Rand. Das wird wohl nur ZP bereinigen können. Daher die Idee mit dem Elastic Video. Das funktioniert in Demoumgebungen astrein, wenn man die CSS Klassen wie vorgegeben definiert. Aber ZP ist ein Baukasten und ich traue mir nicht zu, hier einzugreifen.

Gregor

Ja, sehe ich auch so. Danke, schönen Sonntag noch und g'sund bleiben, Gregor

Vielen Dank für die rasche Antwort, ich teste das abends und gebe danach Rückmeldung!

Gregor

So, hab's doch gleich ausprobiert und es funktioniert fast:

Mit gewähltem Vorschaubild wird das Bild (und nach dem Starten des Players auch dieser) in der richtigen Breite dargestellt. Aber nur so lange, als man das Browserfenster nicht auf die Minimalbreite reduziert - da "springt" die Breite des Videofensters und es erscheint wieder der bemängelte Rand. Ich nehme an, dass ich die CSS Klasse nicht richtig definiert habe - ich habe einfach ihr <style> Segment unter Einstellungen in das Feld CSS hineinkopiert, da fehlt nehme ich an das Rundherum. Und genau da enden meine Kenntnisse...

Bitte mich hier noch hoch zu beten, danke, Gregor

Hallo Maik, ist dieser Rand bei dir auch noch da?

[SOLVED]

Ich habe den Fehler soeben gefunden und jetzt funktioniert es: Steffen hatte elacticVideo statt elasticVideo geschrieben. Seinen CSS Teil hatte ich kopiert, den anderen Teil getippt...

Danke an alle und Gruß aus Wien,

Gregor

Servus, ich hatte zuletzt beide Varianten im Test verwendet. Nachdem nun mit dem Widget und dem verpflichtenden Startbild alles funktioniert, werde ich dieses einsetzen und auf der Testseite ist es aktuell auch so drauf.

Zwei Punkte sind nicht perfekt:

Der Player zeigt auf PC Browsern (nicht auf Smartphones) einen feinen schwarzen Rand und ist minimal abgerundet, passt also in der Desktopdarstellung nicht 100-prozentig zu den Bildern darüber und darunter. Das sieht man aber erst nach dem ersten Abspielen des Videos - das Startbild ist scharfkantig ohne Rand.

Weiters muss man die Bildbreite des Startbildes bewusst auf die Standard-Spaltenbreite setzen, sonst übersteuert das Video (dieses ist breiter - 1280 statt 890) die sonst automatisch auf Spaltenbreite gesetzte Bildbreite und plötzlich ist das Startbild so breit wie das Video. Mit beiden Punkten kann ich leben.

LG, Gregor

Nachtrag: Hab gerade gesehen, dass ich im WWW nicht mehr aktualisiert hatte, nachdem es letztlich funktionierte...

Servus, ich hatte einen Weg gefunden, das Widget Video wie von ZP empfohlen zu nutzen, aber das ist nun die eigentliche und sehr präzise Antwort auf meine ursprüngliche Frage - besten Dank! Lustigerweise waren es genau deine Referenz-Seiten, die ich verwendete, um im aktuellen Projekt vor der Entscheidung für die Umsetzung zu zeigen, was andere im Kunst/Künstlerbereich schon mit ZP gebaut haben. Kam gut an, jetzt muss ich schauen, wie die Anforderungen der Grafikerin erfülle.

Danke nochmal und Grüße aus Wien,

Gregor