Wie youtube-video mit Text umfließen lassen?

MatthiasJasper · 21. Januar 2016

Hallo!

Ich habe auf meiner homepage ein youtube-viedeo per iframe ...
(<iframe allowfullscreen="allowfullscreen" frameborder="1" height="169" src="https://www.youtube.com/embed/wU5w3PbDvOw?rel=0" width="300"></iframe>)
... eingefügt. Soweit alles ganz prima.
Allerdings möchte ich das Video von Text umfließen lassen, und komme damit definitiv nicht weiter (bei eingefügten Bildern habe ich keine Probleme). Auch hier im Form habe ich noch keine Antwort gefunden.

Als Editoren nutze ich je nach Bedarf JCK-Editor oder JCE-Editor

Kann mir jemand weiterhelfen?

Robox · 21. Januar 2016

Das zauber Word heißt float um Text um fließen zu lassen
http://www.css4you.de/float.html

Kubik-Rubik · 21. Januar 2016

Zitat von MatthiasJasper

(bei eingefügten Bildern habe ich keine Probleme)

Hallo Matthias,

willkommen im Forum!

Wie machst du es denn bei den Bildern? Genauso solltest du beim Video vorgehen. Div-Container mit der korrekten CSS-Anweisung (float: left / right) um das Iframe, das ist schon alles.

Viel Erfolg!

Gruß

MatthiasJasper · 21. Januar 2016

hi, erst mal danke dür die Antworten. Problem: ich bin ein absoluter Anfänger, mit den Bildern habe ich es über einen Editor gemacht, nicht auf der Programmierebene.

Wie würde denn ein Div-Container mit der korrekten CSS-Anweisung aussehen bei dem von mir beschriebenen iframe ? (<iframe allowfullscreen="allowfullscreen" frameborder="1" height="169" src="https://www.youtube.com/embed/wU5w3PbDvOw?rel=0" width="300"></iframe>)

bin gespannt auf weitere Antworten!

Robox · 21. Januar 2016

Grundrechtlich ist das kein Hexenwerk hier mal ein kleines Beispiel mit float: left nur Gans ohne Grundkenntnisse von html und css wird du sehr schnell an Grenzen kommen.

Code

<style type="text/css" scoped>
#rammenbox{
...............
}
.iframebox{
float: left ;
}


</style>
<div id="rammenbox">
   <div class="iframebox">
         <iframe  .............>
        </iframe>
</div>


dein text ......................
</div>

Alles anzeigen

skodi · 21. Januar 2016

Hallo Matthias,
wie schon geschrieben, mit der Anweisung "float" kann man sowas machen.

Das ist die einfachste Möglichkeit, dafür:

Code

<div style="float: right">    <iframe src="https://www.youtube.com/embed/wU5w3PbDvOw?rel=0" frameborder="1" width="300" height="169" allowfullscreen="allowfullscreen"></iframe></div>

Man kann das jetzt noch etwas verschönern, in dem dem Video sagt es soll ein bisschen Abstand zum Text einhalten.

Code

<div style="float: right; padding-left: 10px; padding-right: 10px;">    <iframe src="https://www.youtube.com/embed/wU5w3PbDvOw?rel=0" frameborder="1" width="300" height="169" allowfullscreen="allowfullscreen"></iframe></div>

Die elegantere Methode ist natürlich, eine entsprechende Klasse in der CSS-Datei anzulegen, welche die Anweisungen zentral enthält und die man dann bei Bedarf ganz einfach abrufen kann.

dazu schreibst du in die CSS-Datei

Code

.youtube {float:right; }

Und dann kannst du es so abrufen:

Code

<div class="youtube">
<iframe src="https://www.youtube.com/embed/wU5w3PbDvOw?rel=0" frameborder="1" width="300" height="169" allowfullscreen="allowfullscreen"></iframe>
</div>

MatthiasJasper · 22. Januar 2016

Super! Danke, es hat geklappt, hab es nach "skodi´s" Vorhalg gemacht! ... Robox: ich komme jetzt schon an meine Grenzen, bin halt nur ein kleiner Psychoheini und kein Programmierer. Umso mehr freue ich mich über Eure Hilfe!