Eingebettetes Video soll gleiche GRoesse haben wie bild

[CodiD]

Hallo,

ich habe eine Seite, da kann man auf 3 Reiter klicken. Auf den ersten beiden Reitern ist jeweils ein Bild auf der linken Seite zu sehen ("Voraussetzung" und "Bildungsziel"). Beim 3.Reiter habe ich das Bild durch ein kleines Video ersetzt (läuft lokal, keine youtube Einbettung). Leider hat das Video nicht dieselbe Größe wie die Bilder bei den anderen beiden Reitern. Dadurch wirkt das unruhig. Ich habe versucht als Startbild das Bild zu nehmen, welches das Wunschformat hat. Wichtig ist natürlich das responsive Design. D.H. wenn ich die Größe vom Wunschbild einstellen würde, dann ist das Design nicht auf allen Geräten responsiv.

Hat jemand eine Idee? Wäre sehr dankbar.

Viele Grüße CodiD

[Bastelstunde]

Naja, das Einfachste ist, Du setzt "nur" den Wert für die Breite, damit es auch wirklich funktioniert. Dann ist es auch unerheblich, ob Bilder und Video dasselbe Seitenverhältnis haben.

Eventuell kannst Du das sogar zusammenfassen:

<style>
.video, .bilder { width:640px; }
</style>

<img   class="bilder" src="dateiname.jpg">
<video class="video"  src="dateiname.mp4">

Der Video-Tag kann verschiedene Formen aufweisen, je nachdem, ob Du HTML oder HTML5 nimmst. Der Trick mit der "Klasse" funktioniert trotzdem, natürlich auch mit den üblichen Optionen der Masseinheit. Du kannst also auch 80% oder Ähnliches verbauen.

ps: Für 100% gibt es übrigens "Vollbild" 😉

[Rolf B]

Hallo Bastelstunde,

aus meiner Sicht entsteht die visuelle Unruhe durch die Höhe, nicht die Breite.

Eine fixe Breite ist keine Lösung, das kollidiert mit den Media-Breaks im Bootstrap-Layout der Seite.

In der Breite gibt es allerdings auch ein Problem: Das das CSS Konvolut, das da zusammenkopiert wurde, setzt ein padding-right für img Elemente. Nicht für Videos. Und dadurch ist das Video breiter als die Bilder. DAS könnte man fixen.

Aber dazu müsste sich CodiD erstmal zurückmelden.

Rolf

[CodiD]

Vielen Dank. Ich sehe allerdings nicht den gewünschten Effekt. Ich hatte ja auch vorher die Breite schon. Wenn ich das jetzt so mache, wie DU vorschlägst, verzieht sich das Bild.

LG

[Bastelstunde]

<div style="
width:640px;
height:360px;
margin 0 0 0 0; 
overflow:hidden; 
align: center center; 
">

<video style="top:50%; left:50%; right:50%; bottom:50%; height:360px; ">
…
</video>

</div>

Damit hast Du ein DIV-Eement als Rahmen der Bildgrösse und darin Dein Video. Es kam der Einwurf der vertikalen Relation.

[Rolf B]

Hallo Bastelstunde,

mein Minus weil Du nach wie vor ignorierst, dass die Seite responsiv ist.

Rolf

[Bastelstunde]

Da der Anschein gewiss zutrifft, kann ich die Kritik auch konstruktiv annehmen.

Ich sehe nicht nur das Unmittelbare, sonndern auch die Replizierbarkeit.

Das erscheint umso wiedersprüchlicher, weil ich ja im Vorschlag den unmittelbaren Einzelfall erprobe. Übrigens auf Basis von logischer Kombinatorik, einschließlich OOP.

Im Zielsystem (wertfreie Betrachtung) lässt sich der richtige Lösungsansatz angemessen platzieren.

So mache ich das seit Jahrzehnten, sehr erfolgreich.

Ich kann mich noch daran erinnern, vor einer Dekade vor eben solchem Problem gestanden zu sein. Meine Entscheidung fiel dann auf einen DIV-Container mit Ausrichtungsoptionen in gewünschten Bildmaßen und overflow:hidden via Style. Darin das Video-Element mit Breite und Höhe per Style auf 100% gesetzt.

Die Steuerung für den Player kann man ja auch über Parameter unsichtbar, jedoch funktionell halten. Mit etwas Javascript könnte man eine eigene Kreation gestalten.

Wenn die Implementierungen der Standards im Browser oder die Standards zu begrenzt sind, ist dieser Ansatz - zumindestens für mich - passabel. Großes Trubabu zu machen ist in meinen Augen nicht zielführend. Es ist ein Vorschlag, der bei Interesse indidivduell frei nach Herzenslust aufgekoschert werden darf!

heitere Consolengrüße

John Connor

[Gunnar Bittersmann]

@@Bastelstunde

Der Video-Tag kann verschiedene Formen aufweisen, je nachdem, ob Du HTML oder HTML5 nimmst.

(Nicht nur) das ist Unsinn. Es gab vor HTML5 kein video-Element.

Du meinst Element, nicht Tag.

Man kann nicht HTML oder HTML5 nehmen. Browser haben nur einen HTML-Parser, nämlich einen HTML5-Parser. HTML5 heißt jetzt einfach HTML.

😷 LLAP

[Bastelstunde]

Der Punkt geht an Dich, weil ich das tatsächlich falsch formuliert habe.

[Rolf B]

Hallo CodiD,

es ist natürlich schwierig, wenn man sich seine Vorlagen komplett zusammenkopiert und keine einzige Zeile CSS selbst geschrieben hat. Du hast Bootstrap plus ein grad-school Template von templatemo. Es ist ja durchaus legitim, fertige Bausteine einzusetzen, aber wenn sie nicht das tun, was man will, kommt man ins Schleudern. Anpassungen müssen dann nämlich exakt dazu passen und dann beginnt das reverse engineering der dazukopierten Komponenten.

Dein Problem ist nicht die Breite, sondern die Höhe des Video-Elements, ja? Ganz ehrlich: ich würde das nicht ändern. Man kann zwar eine Mindesthöhe setzen, aber die muss auch zur Responsivität der Seite passen. Die kommt von Bootstrap; es verkleinert die col-md-6 Spalte wenn der Bildschirm schmaler wird, bis der Übergang zur Smartphone-Ansicht sie wieder breiter macht. Bootstrap hat Mediensprünge bei Bildschirmbreiten von 576px, 768px, 992px und 1200px. Unterhalb der 576px gibt's sogar noch eine Zone, wo die Breiten proportional zur Viewportbreite wechseln.

Und bei schmaleren Layouts kommt noch hinzu, dass die Höhe des Info-Bereichs nicht mehr vom Bild/Video, sondern vom Text bestimmt wird. Es würde dann nichts mehr helfen, dem Video eine Höhe zu geben, die zu den Bildern passt.

Ich hätte zwar einen (etwas umständlichen) Lösungsansatz, mit dem Du erreichen könntest, dass Bilder und Video in einem variabel breiten Container mit einem definierten Breiten/Höhenverhältnis liegen. Aber aus den genannten Gründen nützt der nicht viel, darum führe ich das jetzt nicht aus.

Rolf

[CodiD]

Lieber Rolf,

ich gebe Dir zunächst absolut Recht, was das Zusammenkopieren angeht. Da ich nur 4 Tage Zeit hatte, musste ich hier pragmatisch sein. Die derzeitieg Lo2sung ist auch keine Endlösung, sondern eine temporäre Seite, die ein paar Wochen online sein wird. Parallel plane ich den richtigen relaunch natuerlich von Scratch (bz. CMS) und möchte definitiv alles selbst schreiben, um solche Probleme der Anpassung nicht mehr zu haben.

LG CodiD

[CodiD]

Hallo Rolf,

danke an der Stelle für Deine Antwort. Genau das habe ich gedacht, dass es wahrscheinlich sinnvoller ist, dass jetzt erstmal hier so zu lassen.

Danke nochmal für Deine Ausführungen.

LG CodiD