nicht angemeldet
Video-Ausgabe @media
Rolf B
Der MartinHallo liebe Community!
Ich habe ein CSS-Problem und ich hoffe, ihr könnt mir helfen.
Ich habe ein Video im Querformat, das bildschirmfüllend dargestellt werden soll. Am Desktop - kein Problem. Am Tablet/Smartphone, natürlich ein Problem, da dass Video im Querformat ist. Ich hätte es gerne am Tablet und am Smartphone gerne "zugeschnitten", so dass der komplette Bildschirm damit ausgefüllt ist. Mir ist bewusst, dass Teile des Videos damit abgeschnitten werden, da das Ausgangsvideo ja im Querformat ist. Könnt ihr mir mit den Codes helfen???
Danke schon im Voraus!
Glg Ines
-
Hallo Ines,
versuch mal, dem Video-Element die Eigenschaft
object-fit: cover;zu geben.
Rolf
--
sumpsi - posui - obstruxi-
Ja, das funktioniert bei der Desktop-Ansicht, aber nicht bei der media-Ansicht...Aber danke für den Input
-
Hallo Ines,
oookay - ich hab grad mal selbst probiert; einem video-Element Breite und Höhe 100% zu geben wird vom Brauser nicht unbedingt akzeptiert.
Grund: Es ist ein inline-Element. Da ist man mit Breiten und Höhen nicht so frei.
Was bei mir - im Handysimulator von Chrome - zu mehr Freiheit und bildschirmfüllendem Video führte:
video { display: block; width: 100vw; height: 100vh; object-fit: cover; }Breite und Höhe also in Prozent der Viewportgröße (vw/vh), nicht Prozent. Prozent hat bei mir nicht geklappt, obwohl ich html und body auf 100% Höhe gesetzt hatte.
Wichtig ist auch die Angabe des viewport Meta im <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">sonst simuliert der Handybrowser einen 960px breiten Viewport.
Rolf
--
sumpsi - posui - obstruxi-
Danke für deine Mühe, aber auch das funktioniert nicht...es wird zwar das Overlaybild "gecropped", nicht aber das Video selbst.
Aber falls es etwas hilft, hier mal meine Codes:
<video id="video" % controls poster="https://angebote.businessbasis.at/wp-content/uploads/2020/12/Points.jpg"> <source src="https://angebote.businessbasis.at/wp-content/uploads/2021/04/Büro_Grundidee.mp4" type="video/mp4"> </video><script type="text/javascript"> document.getElementById('video').addEventListener('ended',function(){ window.location ="https://businessbasis.at"; }, false); </script>Den Tag <meta name="viewport" content="width=device-width, initial-scale=1"> habe ich im Header eingegeben.
Meine URL (zu Testzwecke) würde lauten:
https://angebote.businessbasis.at/testintro/
-
Edit: es funktioniert bei mir in der Vorschau, aber nicht am handy selbst (Safari)...grrrrrr
-
Hallo Ines,
object-fit wird vom Safari unterstützt.
https://caniuse.com/object-fit
Wird das Video-Element auf volle Viewportgröße gebracht? Mach mal einen Rand drum.
Aber falls es etwas hilft, hier mal meine Codes:
Das Prozentzeichen darin ist ein Kopierfehler?
Und da die Steuerung mit CSS erfolgt, solltest Du genau prüfen, welche CSS Eigenschaften für dein Video-Element greifen. Hast Du einen Mac als Desktop? Der Safari darin kann sich zum Safari auf dem iPhone connecten und remote debuggen - heißt es. Möglicherweise geht's auch vom iPad zum iPhone, ich kenne deinen Gerätezoo nicht.
Um von non-Safari Browsern aus zu debuggen, habe ich diesen Tipp gefunden, kann aber nicht sagen ob das taugt oder noch funktioniert.
Rolf
--
sumpsi - posui - obstruxi-
Tja...das Prozentzeichen hat eigentlich da gar nix zu suchen, aber danke fürs aufmerksam machen!
Nö, ich habe (noch) keinen Mac...am Android funzt es einwandfrei.
Ich werd mal meine CSS-Steuerungen checken.
Danke dir auf alle Fälle für deine wertvollen Tipps! Sollte ich das heute noch hinbekommen melde ich mich (für die Nachwelt...was tatsächlich der Grund war) und schließ dich ins Abendgebet ein 😉
Liebe Grüße!
-
Danke nochmal Rolf, für deine Mühe!
Ich hab einen Rand rundherum gemacht und meine CSS--Eigenschaften gecheckt. Das mit dem Rand hat auch nicht geklappt. CSS funzt.
Scheinbar muss ich wirklich debuggen und sowas hab ich noch nie gemacht...brrrr...mal sehen wie weit ich komme, aber du hast mir wirklich schon sehr viel geholfen.
Glg
-
Hallo Ines,
Scheinbar muss ich wirklich debuggen und sowas hab ich noch nie gemacht
F12 drücken und dann im Inspektor die Seite betrachten.
mal sehen wie weit ich komme, aber du hast mir wirklich schon sehr viel geholfen.
Ansonsten ist das Forum auch am Wochenende besetzt 😉
Viele Grüße
Robert-
Hallo Robert,
Scheinbar muss ich wirklich debuggen und sowas hab ich noch nie gemacht
F12 drücken und dann im Inspektor die Seite betrachten.
ich vermute, dass die Möglichkeiten am Handy-Browser stark eingesschränkt sind - vom bereits vorgeschlagenen Remote-Debugging mal abgesehen.
Live long and
proshealthy,
Martin--
Wer respektiert werden will, sollte zunächst damit anfangen, andere zu respektieren.-
Moin Martin,
Scheinbar muss ich wirklich debuggen und sowas hab ich noch nie gemacht
F12 drücken und dann im Inspektor die Seite betrachten.
ich vermute, dass die Möglichkeiten am Handy-Browser stark eingesschränkt sind - vom bereits vorgeschlagenen Remote-Debugging mal abgesehen.
stimmt, und die Frage ist, inwiefern Bildschirmgrößen Testen (so heißt das im Firefox) einem weiterhelfen kann.
Viele Grüße
Robert
-
-
-
-
-
-
Moin Ines,
Danke für deine Mühe, aber auch das funktioniert nicht...es wird zwar das Overlaybild "gecropped", nicht aber das Video selbst.
Kommen deine Nutzer nicht auf die Idee ihr Endgerät um 90° zu drehen um das Video in voller Pracht anzusehen?
Aber falls es etwas hilft, hier mal meine Codes:
<video id="video" % controls poster="https://angebote.businessbasis.at/wp-content/uploads/2020/12/Points.jpg"> <source src="https://angebote.businessbasis.at/wp-content/uploads/2021/04/Büro_Grundidee.mp4" type="video/mp4"> </video>Das
%vorcontrolssieht merkwürdig aus …<script type="text/javascript"> document.getElementById('video').addEventListener('ended',function(){ window.location ="https://businessbasis.at"; }, false); </script>Damit unterbindest du, dass sich ein Nutzer das Video ein zweites Mal ansehen kann. Soll das so sein?
Viele Grüße
Robert-
Ne, das ist so gewünscht...die Ansicht (Hochformat, „gecropped“, einmalige Ansicht...quasi als „Intro“...ich weiß, wäre auch nicht mein Stil...
Das % ist natürlich ein Fail....das hat sich eingeschlichen.
Aber dankeschön 😀
-
Danke an alle, die versucht haben mir zu helfen...Fazit: Sarfari ist nicht auf meiner Seite...auch mit festen px-Angaben funzt es nicht. Aber mit dem werde ich wohl leben müssen :-) Ihr seids spitze, danke nochmal
-
-
-
-
-
-