Videos als I-Frame nebeneinander und Text unter dem Video

[Siggit]

Hallo,

ich versuche gerade gerade 2 Youtube Videos als I-Frame responsive einzubinden.

WB Version: 2.13.2 r133
Template: Hortal

Das mit den Videos habe ich soweit auch hinbekommen. Mein Ziel ist unter das jeweilige Video noch einen Text links ausgerichtet zu bekommen. Der Umbruch der Videos klappt auch bei kleineren Diplayauflösungen. Leider steht der Text nicht da wo er hin soll. finde irgendwie keinen richtigen Ansatz.

Bsp.

Video 1                            Video 2
Beschreibung Video 1        Beschreibung Video 2

html Code:

Code: [Select]

<div class="card">

<div class="media_links"><iframe frameborder="0" height="210" marginheight="0" marginwidth="0" name="Video 1" scrolling="no" src="https://www.youtube.com/embed/1234567890" title="Beschreibung für Video 1" type="text/html" width="374"></iframe></div>
<div class="titel_links"><p>Video 1</p></div>

<div class="media_rechts"><div class="media_links"><iframe frameborder="0" height="210" marginheight="0" marginwidth="0" name="Video 2" scrolling="no" src="https://www.youtube.com/embed/0987654321" title="Beschreibung für Video 2" type="text/html" width="374"></iframe></div>

<div class="titel_rechts"><p>Video 2</p></div>
</div>
CSS Code:

Code: [Select]

.card {
  display: flex;
  flex-wrap: wrap;
  background: #111;
}
.card > * {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 280px;
  display: flex;
  justify-content: center;
}
.media_links {
  background: #111;
  min-height: 280px;
  max-width:100%;
}
.titel_links {
  background: #111;
  min-height: 280px;
  max-width:100%;
  text-align:left;
}
.media_rechts {
  background: #111;
  min-height: 280px;
  max-width:100%;
}
.titel_rechts {
  background: #111;
  min-height: 280px;
  max-width:100%;
  text-align:left;
}
Muss ich da im Quellcode oder im CSS ansetzen?

Vielen Dank.

[Siggit]

habe die Lösung gefunden!!!

neu erstellt <div class="video-frame">

<div class="titel_links"><p>Video 1</p></div>
<div class="titel_rechts"><p>Video 2</p></div>
nach </iframe> verschoben.

Code: [Select]

<div class="card">
<div class="video-frame">
<div class="media_links"><iframe frameborder="0" height="210" marginheight="0" marginwidth="0" name="Video 1" scrolling="no" src="https://www.youtube.com/embed/1234567890" title="Beschreibung für Video 1" type="text/html" width="374"></iframe><div class="titel_links"><p>Video 1</p></div>
</div>
</div>
<div class="media_rechts"><div class="media_links"><iframe frameborder="0" height="210" marginheight="0" marginwidth="0" name="Video 2" scrolling="no" src="https://www.youtube.com/embed/0987654321" title="Beschreibung für Video 2" type="text/html" width="374"></iframe><div class="titel_rechts"><p>Video 2</p></div>
</div>
</div>
</div>
 

[hgs]

Danke für´s teilen

[Siggit]

Danke für´s teilen

Gerne doch.