Video mit Fliesstext rechts

Styx Testblog

Video mit Fliesstext rechts

Geschrieben von Beat am

Versuch um ein Video in 50% Seitenbreite anzuzeigen, mit Fliesstext rechts.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Die richtige Anleitung dazu steht im Kommentar c5400

Trackback-URL für diesen Eintrag

Dieser Link ist nicht aktiv. Er enthält eine kopierbare Trackback-URI, um manuell ein Ping- und Trackback zu diesem Eintrag für ältere Blogsysteme zu generieren; zB (immer noch valide) über das zur Verfügung gestellte Eintragsfeld des serendipity_event_trackback Plugins. Serendipity und andere Blogsysteme erkennen die Trackback-URL heutzutage aber automatisch anhand der Artikel-URL. Die Trackback-URI für ihren Link des Sender-Eintrages lautet daher wie folgt: »https://styx.beatsblog.ch/2634-Video-mit-Fliesstext-rechts.html«

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

  1. Ian Styx am :

    Du hast da auch in den video tag attributen ein width="50%" drin geparkt.

    <video controls="" src="/uploads/2020/IMG_1049.mp4" title="Start Video" type="video/mp4" width="50%">&nbsp;</video>

    Wie kam das da hin?

    Es ist auch so schon schwierig genug, aber so ginge es

    <div class="videocontainer">
	<div class="media_object_container">
		<!-- s9ymdb:10332 --><video controls="" src="/uploads/2020/IMG_1049.mp4" title="Start Video" type="video/mp4" width="auto">&nbsp;</video>
	</div>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

    Und dies dann in die user.css

    @media screen and (min-width: 540px) {
	.videocontainer {
	    display: flex;
	    width: 100%;
	}
	.videocontainer .media_object_container {
	    min-width: 460px;
	    margin-right: 1em;
	}
}

    Du müsstest solche Blöcke also mit einem handgefügtem div class="videocontainer" Container umkleiden. Dann kommt es nur noch auf das Video an sich an. Was ist dessen echte wahre Größe? In diesem Fall stellte sich heraus das es intern 720x1280px groß ist. Das ist natürlicherweise viel zu groß für den pure content container um gefließten Text anzubringen. Vielleicht deswegen die 50%. Besser aber ist width="auto" und dann eben per styles containerisieren und flexieren, ab einer bestimmten screen Größe mit einem minimal-width - ja auch wenn es schwierig zu verstehen ist, sonst würde es durch das flex zu klein, das dann als bestimmende width gilt.

  2. Beat Post author am :

    🤔 Schluck. Ganz schön kompliziert.

    Ja, das "with= 50%" habe ich in den Quelltext eingefügt, weil mir sonst das Video einfach viel zu gross dargestellt wurde. Dadurch bin ich dann auf die Idee gekommen, dass rechts umfliessender Text noch schön aussehen würde.

    Wenn ich jetzt aber lese, welche Handstände ich dafür vollführen muss, dann lasse ich das besser bleiben. Seit 2005 gibt es im Live-Blog genau 3 Videodateien. Das kommt also gaaaanz selten vor. Und ich habe auch zukünftig nicht vor, zum Video-Blogger zu mutieren.

    Danke für die Erklärungen! Es hat mir auch (wiedereinmal) meine Grenzen aufgezeigt.

  3. Ian Styx am :

    Nunja, schwierig eben nur beim ersten Mal - bis man den Bogen raus hat.

    Ab dann braucht man nur noch

    <div class="videocontainer">
...
</div>

    in den Quelltext hineinkopieren!

    Ups... korrigiere bitte mal .vtcontainer in .videocontainer in meinem 1800px Beispiel.

  4. Beat Post author am :

    Ups... korrigiere bitte mal .vtcontainer in .videocontainer in meinem 1800px Beispiel.

    Ist dieser Blog selbstheilend (oder habe ich 🍅 auf den 👀)? Habe nirgends einen ".vtcontainer" gefunden und auch das "schiweig" hat sich scheinbar selbständig in "schwierig" verwandelt...

    Mal ne blöde Frage. Wenn ich nun allen Kram in die user.css schreibe, den ich nur alle Schaltjahre mal verwende, dann wird die Datei ja immer grösser (sind jetzt schon über 12'000 Zeichen in etwa 570 Zeilen). Verlangsamt das nicht jeden Seitenaufbau?

  5. Ian Styx am :

    Insgesamt sind deine user styles "nur" 1/5 von den gesamt styles. Da die user.css sowieso in die serendipity.css inkludiert wird, sind ein paar zusätzliche Mini Bytes, die die ganze Sache besser und runder machen, für die Frage der Verlangsamerung also definitiv zu vernachlässigen, sprich: Keine Skrupel! 😊

    Danke!

  6. Ian Styx am :

    Naja bei der Hälfte von 720 wäre es halt das hier. Und würde dann für jedes weitere Video gelten das kommt, außer es hätte sehr ungewöhnliche Maße.

    @media screen and (min-width: 481px) {
    .videocontainer {
        display: flex;
        width: 100%;
    }
    .videocontainer .media_object_container {
        min-width: 360px;
        margin-right: 1em;
    }
}

    Außerdem kannst du dir deine Handstände in die Tonne kloppen. 😉 Die habe ich ja schon für dich gemacht. Du hättest also nur noch ein copy & paste vor dir. 🙄

    Wortkorrektur: 1. Kommentar letzter Satz.
    Namekorrektur Unterster Kommentar (falsch eingehängt) im CSS Beispiel, dort wo ich die Wortkorrektur angemerkt hatte.

  7. Ian Styx am :

    Ähem schiweig müsste natürlich schwierig heißen. Schreibt man übrigens gleich 480px in das width Attribute gilt dies natürlich immer, auch für die mobiles, was ich deshalb zu vermeiden suchte.
    Für die ganz großen Desktops könnte man sogar noch das min-width auf max-contents setzen so dass es sich bis zu auf die echte Video Breite aufbläht, zB

    @media screen and (min-width: 1800px) {
    .videocontainer .media_object_container {
        min-width: max-content;
    }
}

     

  8. Beat Post author am :

    Ah... hier hat sich der .vtcontainer versteckt. Habs jetzt in .videocontainer geändert. 😉

  9. Ian Styx am :

    Ist dieser Blog selbstheilend (oder habe ich 🍅 auf den 👀)?

    Das wäre sicherlich ein wirklich interessantes Feature..! 😄

  10. Beat Post author am :

    🤔 Hmm... Habs versucht. Doch das Video ist immer noch riesig. Wo wird dem denn gesagt, dass es nur 50% der Containerbreite belegen soll?

  11. Ian Styx am :

    @media screen and (min-width: 480px) {
    .videocontainer {
        display: flex;
        width: 100%;
    }
    .videocontainer .media_object_container {
        min-width: 360px
        margin-right: 1em;
    }
    .videocontainer .media_object_container video {
        float: left;
    }
}

    Es ist schwierig, da der gefließte Text so angeklebt bleibt und nicht hinter dem video wie auf die content aufzieht. Gerade an dieser Stelle waren meine Beipiele mit 480px auch nicht gut, sehe ich jetzt.
    Also muss man überhaupt vermeiden, dass ein rechtgefließter Textblock allzu lang ist. Das jetzige Beispiel ist dafür schonmal besser.

    Nimm  das halt solange. Ich könnte mir vorstellen das man gar keine p tags im media object container haben darf. Aber da muss ich mir erst mal selbst ein Beispiel machen um das auseinanderzuklamüsern.

  12. Ian Styx am :

    Uhh da fehlt ein Semikolon hinter 360px. Das muss da hin sonst klappt das nicht!

  13. Ian Styx am :

     Irgendwie ist der Tag heute leicht verwirrt. So ist es natürlich viel einfacher! Lass einfach den videocontainer weg.

    <div class="media_object_container">
    <!-- s9ymdb:10332 --><video controls="" src="/uploads/2020/IMG_1049.mp4" title="Start Video" type="video/mp4" width="auto">&nbsp;</video>
</div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    @media screen and (min-width: 480px) {
    .media_object_container {
        margin-right: 1em;
        width: 50%;
        float: left;
    }
    .media_object_container::after {
        clear: left;
    }
}

     

  14. Ian Styx am :

    Und jetzt kannst du sogar noch das width="auto" aus dem video tag noch rausnehmen.

    Einfacher gehts nicht mehr! 😃

  15. Beat Post author am :

    :applaus: Klasse! 👍

    Vielen Dank! Habe ich gleich in den Live-Blog übernommen! Siehe: https://www.beatsblog.ch/2750-Altersheim-Ausflug.html

  16. Ian Styx am :

    Versuch um ein Video in 50% Seitenbreite anzuzeigen, mit Fliesstext rechts.

    Eigentlich müsste es heißen: Versuch um ein Video in 50% Videobreite anzuzeigen, mit Fliesstext rechts. Die halbe content Seitenbreite ist nur das Ergebnis der reduzierten Videobreite.

    Anbei solltest du dem 

    .media_object_container { margin-right: 1em; ...}
    noch ein ebensolches bottom margin mitgeben. Siehe den Abstand zu den drei Bildern im Live Blog.

  17. Beat Post author am :

    Die Lösung -und da hast Du natürlich recht- war, dass wir das Video als solches in der Grösse um 50% reduziert haben.

    Meine Initalidee war hingegen, dass ein Video max. 50% der post content Breite einnimmt. Dies in etwa gleich, wie es ein Vorschaubild macht. Dies ist ja max. 400px breit und wenn der content-Bereich unter 800px fällt, belegt es noch 50% der Anzeigebreite. Das wäre meine Wunschvorstellung gewesen. Dass Videos praktisch gleich eingebunden werden können, wie Bilder. Als Vollformat oder als 400px-Thumbnails, links, mittig oder rechts bündig.

    Doch so wie Du es jetzt gelöst hast, gefällt es mir auch sehr gut. Nochmals: Vielen Dank für Deine Hilfe!

  18. Ian Styx am :

    Was mir dabei noch auffiel ist folgendes:

    Pure ist ein mobile-first theme. Deshalb stehen die mobile und general Anweisung nicht in den MEDIA QUERIES, sondern davor. Alle folgenden Größen sind media screen min-width Größen, um den Anforderungen größerer Screens gerecht zu werden. Das kaskadiert.

    Du hast das Prinzip am unteren Ende 2x unterbrochen, in dem du zwei max-width queries in die user.css eingebaut hast, die genau andersherum funktionieren. In der einen - ich glaube es war die max-width: 539px - steht:

    .post_content, .serendipity_staticpage {
    font-size: calc(.95rem + 1vw);
}

    Besser wäre IMHO

    .post_content, .serendipity_staticpage {
    font-size: 1.234625rem;
}

    denn schaue dir mal die Schriftgröße so zwischen 480px und 540px an (und wie sie ingesamt calculiert kaskadiert).

    Ingesamt wäre es also ratsam und ist vielleicht eine kleine Tüftelei für dunklere Herbsttage das Prinzip wieder herzustellen.

  19. Beat Post author am :

    Wenn ich Dich richtig verstanden habe, definiert die pure.css resp. die user.css die kleinst mögliche Darstellung und für grössere Auflösungen kommen die @media screen and (min-width: ????px) Anweisungen ins Spiel.

    In meiner user.css gibt es genau eine (max-with) Anweisung und die sieht so aus:

    @media screen and (max-width: 539px) {
.post_content blockquote {
	margin-left: 10px;
	}

.post_content,
.serendipity_staticpage {
    font-size: calc(.95rem + 1vw);
	}
	
#footer p {
    visibility: visible;
	}
	
#serendipity_banner {
    display: initial;
    position: initial;
    top: initial;
    padding-bottom: initial;
	}
}

    Das heisst also, ich könnte diesen Teil quasi nach oben schieben, da die nachfolgenden @media-Anweisungen für Screen-Grössen ab 540px greifen. Richtig?

    Und wenn ich das mache, dann soll ich den font-size für Smartphones unter 540px nicht kalkulieren lassen sondern auf 1.234625rem setzen. Worauf sich alle nachfolgenden Schriftgrössen (für grössere Displays) ab diesem Wert errechnen.

  20. Ian Styx am :


    • Ja, so definiert sie!

    • Ja schieben könntest du... aber...

    • Genau. Deshalb das aber - du müsstest dann für alle user Definitionen die für (ab) kleine Größen definiert sind überprüfen, ob sie eventuell media queries für größere Screens mit anderen Werten benötigen.


  21. Beat Post author am :

    O.K. Habe in der user.css nun keine @media screen and (max-with: 539px) Anweisung mehr stehen.

    Im "Überprüfen" bin ich nicht so gut 😏. Doch auf den ersten Blick, sieht es am Smartphone, wie auch am Desktop ganz i.O. aus.

    Danke für die Hinweise und Anleitung! 👍

  22. Ian Styx am :

    Falls du es nicht selbst bemerkt haben solltest, hast du jetzt ab 540px leider eine durchgehendend kaskadierende Font Größe. Nicht schön auf einem Desktop.

    Das mit dem Calc + xx war ja dafür gedacht, auf unterschiedlichen Screens eine kalkulierte Schriftgröße zu erzeugen. Das war sehr fein kalkuliert und granuliert und ist jetzt zumindest für die post Schrift Größe obsolet, da du es überschreibst. Die 

    font-size: 1.234625rem;
    Änderung war tatsächlich nur für etwa 480 bis 539 Pixel gedacht.

    Deswegen der Hinweis auf längere Herbsttage mit mehr Zeit um das alles auseinanderzuklabüsern, denn mit deinem max-width hatte es ja tadellos funktioniert bis auf diese kleine Änderungsanmerkung. Verstehst..??

  23. Beat Post author am :

    Verstehst..?? -> Ähm... Nein...

    So wie ich es verstanden habe, war das ja die Idee der Sache. Dass ich nicht für eine bestimmte Screengrösse die Schriftgrösse festschreibe, sondern von einem Grundwert jeweils berechnen lasse.

    Ich sehe an meinem Laptop-Montor auch keinen Unterscheid zu vorher. Vermutlich muss ich mal den Cache leeren....

    Nein, ich sehe das Problem noch nicht...

  24. Beat Post author am :

    Zu verwirrend für mich. Habe nun wieder die alte user.css (mit dem max-with) aufgespielt.

  25. Ian Styx am :

    Ich sehe an meinem Laptop-Montor auch keinen Unterscheid zu vorher.

    Es ging dabei um die Schrift(größe) in einem entry Text und nirgends anders. Vielleicht ist dein Laptop Screen auch nicht groß genug gewesen um die Auswirkungen sehen zu können.

    Nur um noch mal zu rekapitulieren:

    1. Du hast recht, es war nur 1 max-width in deiner user.css. K.A. wo ich das zweite gesehen und her hatte...
    2. Es ging nur um den Austausch von font-size: calc(.95rem + 1vw); mit font-size: 1.234625rem; in Ersterem (1).
    3. Dieser Austausch betraf in seiner Auswirkung nur screen Größen zwischen etwa 440 bis 539 Pixeln, da das calc in diesem Range zu sehr hochrechnet und man dort besser mit dem propagierten Ersatz auskommt.
    4. Eine eventuelle Nichtbenutzung/Umwandlung eines benutzten max-width MEDIA QUERIES in offene rules hat (-wie gesehen und oben angemerkt-) Folgen (-ähnlich der, die ich in (3) für den Range beschrieb-), die mit weiteren media query Rules für größere Screens bedacht/bekämpft werden müssen (-Tüftelei für Liebhaber-).
    5. Besser ist also (erstmal) bei max-width: 539px wie jetzt zu bleiben und (2) darin vorzunehmen.

  26. Beat Post author am :

    Danke für die Erklärungen. Habe nun font-size: 1.234625rem; eingesetzt (hier und auf dem Live-Blog). So auf die Schnelle habe ich am Smartphone keinen Unterschied festgestellt. Sollte also soweit passen. Bin Morgen mehr mit dem Smartphone unterwegs und schaue mir das dann genauer an.

Kommentar schreiben

Dieses Blog ist im "Notfall Kommentar"-Modus. Bitte kommen Sie später wieder.
to top of page