Eingebettetes Video erscheint in zu kleiner Größe auf dem Mobile Browser

[chriz85]

Hey Leute, ich möchte ein Video auf meiner Website implementieren.
Habe das Video auf den Webspace hochgeladen und den Code <iframe ... verwendet und auf das Video verwiesen, um es auf der Seite einzubinden.
Das funktioniert auch.
Nur das Problem ist, auf dem PC-Browser sieht das Video gut aus, alles ist in Ordnung, aber auf dem mobilen Browser des Smartphones erscheint das Video super klein, aber innerhalb der angegebenen Frame-Abmessungen.
Man muss direkt in der Mitte auf den Play-Button klicken, dann erscheint das Video bzw. Thumbnail in gewohnter Größe und man kann es starten.
Es erscheint jedoch nicht auf üblicher Weise auf Anhieb und ich frage mich, warum dies vom Erscheinungsbild auf dem PC Browser abweicht.
Danke für jeden Rat.

 

[basti1012]

Du solltest und mal einen Link geben, wo wir das testen können, oder einmal den ganzen Code posten.

Das Problem wird wahrscheinlich vom iFrame kommen.
Ist der Code im iFrame den responsiv?
Öffne den Link vom iFrame mal in Browser und schau mal, ob das dann richtig dargestellt wird.
Da du sagtest, dass es nur ein Video ist, da frage ich mich, warum du ein iFrame dafür nutzt?
Dafür gibt es das Video Element und das lässt sich dann auch einfach auf alle Bildschirmgrößen anpassen.

Falls du aus irgendein Grund beim iFrame bleiben willst/musst (Bitte den Grund dann erzählen) kann man da auch etwas machen, doch dafür muss das Video auf der gleichen Webseite liegen.
Ist das Video auf einer anderen Webseite, könnte man da noch anders tricksen.

So weit muss es ja nicht kommen, nutze einfach das Video Element, dann solltest du es auch hinbekommen.

EDIT: Warum hat das iFrame eine feste Breite?
So wird das auch nie responsive

 

[chriz85]

@basti1012 Ich danke dir für dein rasches Feedback und den Gedankenanstoß. Ich war auf dem falschen Weg mit iFrame. Habe das Video Element wie beschrieben verwendet und es hat so funktioniert wie ich es mir vorgestellt habe.
<video width="300" playsinline controls> <source src="https://.......mp4" type="video/mp4"></video>