YouTube Video als "float: left" im Post platzieren?

  • Hallo allerseits,

    ich hab probiert, ein eingebettetes YouTube Video mit <img class="alignleft"> auszurichten (wie es mit den Bildern ja klappt). Leider geht dies nicht...
    Kann mir einer sagen, wie ich bei einem Embed-Objekt den Text drumrum fliessen lassen kann?

    Danke für Eure Hilfe!

    Gruss Livio

    Livio’s Weblog

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Bitte...

    Kann hier niemand weiterhelfen? oder ist die Frage zu trivial?

    Ich würde mich echt freuen, wenn sich jemand kurz die Zeit nehmen könnte mir einen Tipp zukommen zu lassen!

    Danke und Gruss

    Livio

  • Morgen! Also ich mach sowas immer, indem ich den Youtube-Clip in ein div mit den selben Maße reinstelle, also so:

    Code
    <div style="float: right; width: 255px; 
    height: 210px; padding-top: 5px; padding-left: 6px">
    <object width="255" height="210"><param name="movie"
    value="http://www.youtube.com/v/ib5RWH8MzyE"></param><param 
    name="wmode" value="transparent"></param><embed 
    src="http://www.youtube.com/v/ib5RWH8MzyE" 
    type="application/x-shockwave-flash" wmode="transparent" 
    width="255" height="210"></embed></object>
    </div>

    In diesem Beispiel wird der Clip im Post rechts angezeigt, aber des kannste ja mit float: right/left ändern, ebenso den Abstand zum Text und zur Oberkante mit den padding-Angaben.

    Beste Grüße
    Herr Nack

  • hmm...irgendwie will der nicht so ganz...das div bewegt sich nicht so wie ich das möchte :-) kann man das nicht mit Minus-Werten oben und links bündig bringen? v.a. funktioniert jetzt die Absatzkontrolle nicht mehr :-/ sprich, meine Linie oberhalb der Post-Metadaten geht hinter das div...ojee...

    hast du dazu noch einen Tipp?

    Danke schonmal!

  • Hmm, jo, ich sehs. Das mit der Linie dürfte sich erledigen, wenn du das div irgendwie hochkriegst. Das ist bei mir aber auch immer so, musste bei jedem Post bischen experimentieren. Wenn du das padding-top mal auf 0 setzt oder so? Wenn du das div oben bündig hinbekommen hast und die linie immer noch verdeckt wird, setzte mal nach deinem Text ein paar <p> oder <br>, um die Linie runterzusetzen. Bin da nu auch kein Experte, aber so könnts vielleicht klappen aufne Art.

  • .narrowcolumn .postmetadata {
    clear:left;

    dann mit den oben erwähnten paddings spielen bis es passt. Aber mach dir da lieber eine Klasse draus und dann über die CSS. Also so, statt:

    HTML
    <div style="float: right; width: 255px; 
    height: 210px; padding-top: 5px; padding-left: 6px">
    
    
    einfach
    <div class="youtube">


    dann in die CSS

    HTML
    .youtube{
    float:left;
    width: 255px; 
    height: 210px;
    padding: 5px 6px 10px 0;
    }
  • Oder so, kannste natürlich auch ne CSS-Klasse anlegen. Ich mache so Style-Sachen immer lieber direkt im jeweiligen div, weil wie gesacht, ich in meinem Fall muss da bei jedem Post hin und her probieren, da will ich net immer zwischen Post und CSS-Datei wechseln um Angaben zu ändern. Aber des is ja Geschmackssache.

    Haste übrigensn coolen Musikgeschmack, rftc, sehr schön :-D.

    Bei mir sieht das mit den youtubeclips übrigens so aus, zum Beispiel.

    Beste Gräße
    Herr Nack

  • Herr Nack, Olaf, erste Sahne!

    Danke vielmals für eure Inputs...! Jetzt bastel ich nochmal ne Runde...

    p.s. Herr Nack, freut mich...man ist ja bei solcher Musik nicht gerade im Mainstream :-) immer wieder schön wenn man "Gleichgesinnte -ohrte" trifft :-)
    Heute gibts übrigens noch nen neuen Post: Meine Metal-Highlights 2006...solltest vielleicht mal reinschauen wenn's dich interessiert :-)

    Gruss aus dem diesigen Zürich

  • geht nicht :-(

    Kann hier jemand mal für mich rumprobieren?
    Aktuell hab ich:
    [size=8]
    <div style="float: left; width: 190px;
    height: 154px; padding-top: -20px; padding-left: -5px;>
    <object width="180" height="154"><object width="180" height="154"><param name="movie" value="http://www.youtube.com/v/B-rGzIOEIJE"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/B-rGzIOEIJE" type="application/x-shockwave-flash" wmode="transparent" width="180" height="154"></embed></object></div>Hier mal ein etwas anderer Windows-Spot aus vergangenen Zeiten (jaja, bin grad ein wenig dem Retro verfallen :-). Vergesst auf jeden Fall hochglanz, vergesst transparenz, vergesst hohe Auflösung, und v.a. vergesst intelligente Werbung! Aaaaaber: geil, trotz allem :-)

    [size=10]Ich bring das verd...aargh-Video einfach nicht höher rauf :-//[/SIZE]
    [/SIZE]

  • jajaja, hab ich beretis angepasst :-)

    Olaf, aber jetzt brauch ich doch noch deine Hilfe:

    ich hab's mit CSS probiert, und alle Werte des Div-Containers übernommen, aber im Test ist das Ding nicht identisch platziert :-( woran kann das liegen?

    hier der CSS-Eintrag:

    [size=8].youtube {
    float: left;
    width: 190px;
    height: 154px;
    padding-top: -20px;
    padding-left: -5px;
    margin-top: -15px;
    margin-bottom: 5px;>
    }

    [/SIZE]und hier der Post-Eintrag im Original (aktuell ohne CSS natürlich):

    [size=8]<div style="float: left; width: 190px;
    height: 154px; padding-top: -20px; padding-left: -5px; margin-top: -15px; margin-bottom: 5px;>
    <object width="180" height="154"><object width="180" height="154"><param name="movie" value="http://www.youtube.com/v/B-rGzIOEIJE"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/B-rGzIOEIJE" type="application/x-shockwave-flash" wmode="transparent" width="180" height="154"></embed></object></div>

    [size=10]das Ergebnis siehst du auf: Livio’s Weblog natürlich....Danke fürs Anschauen![/SIZE]
    [/SIZE]

  • Nimm mal das BR hier raus:
    <object height="154" width="180"><br>

    padding ist kein negativ erlaubt!!! Nimm das weg, nicht das es doch einer nimmt!

    Ist jetz noch was?

    EDIT ach du meinst weil die 2 unterschiedlich sind? Das ist doch klar, nimm bei beiden die Klasse youtube, guck in den Code.

    Viele Grüße Olaf, Ego / Blog? / Heimat

    Einmal editiert, zuletzt von Olafb (22. März 2007 um 10:50)

  • Sorry Olaf, ich seh kein <br> weder bei der Version mit class (oben) noch bei der Version mit direkten Angaben (2. Post)...ich hab's jetzt versucht, in der CSS nur mit Padding: 0 0 0 0px; anzugeben, aber dann ist es wieder verrutscht :-(( wie soll man das denn ohne Minus raufbringen?

    Danke für Deine Hilfe

    p.s. ich würde noch einen Tipp benötigen, weiss aber nicht, ob ich extra einen neuen Thread eröffnen soll: es geht darum, dass bei mir, wenn ich in der Single Post Ansicht bin, die Postmetadaten nicht zentriert anzeigen kann (also im CSS bei .alt), sonst macht der erste Kommentar gleich mit (aber nur der, komischerweise)...ist dies verständlich bzw. kannst du dir das erklären?

    Nochmals Danke und Gruss!

  • So, getested in FF2:

    HTML
    .youtube {
    	float: left; 
    	width: 190px; 
    	height: 154px; 
    	margin:-12px 0px 15px 0;
    	}


    Das BR macht dir dann Wordpress rein. Weil du dort einen Zeilenumbruch hast, aber lass, mich stört sowas immer, ist ja überflüssig. Laas es aber so, sonst fängst du wieder an anzupassen.

    Für mehr hab ich jetzt erst mal keine Zeit, Tschau....

  • Und wie steht's bei 2 Videos untereinander?

    Jetzt muss ich nochmals nerven Olaf (oder wer auch immer helfen mag):

    Wie kann ich die <div class> (evtl. alternativ) definieren, damit der Text an 2 Videos untereinander (beide links ausgerichtet) vorbeiläuft? Hab's nicht hinbekommen. Aktuell siehts so aus:

    Livio’s Weblog » Blog Archive » Trittbrettfahrer…

    Nett wär, wenn der Text zwar beim unteren Video steht, aber das Video natürlich ebenfalls links ausgerichtet ist...

    Einer ne Idee (z.B. was mit clear: both oder so?)

    Gruss Livio

  • Hmm. Jo, also da versuch ich mich gerne mal wieder in sicherem Auftreten bei völliger Ahnungslosigkeit.

    1. Versuch:
    Du hast das schon so gemacht, oder:
    div für 1. Video
    div für 2. Video
    text

    Wenn nicht, mach mal so. Erst die beiden divs untereinander, damit die beiden clips untereinander und linksbündig erscheinen, und erst unter den beiden divs mit dem Text beginnen. Probier mal.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!