WebsiteBaker Support (2.13.x) > Hilfe & Support (deutsch)

Videos als I-Frame nebeneinander und Text unter dem Video

(1/1)

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: ---<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>
--- End code ---

CSS Code:


--- Code: ---.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;
}
--- End code ---

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: ---<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>
--- End code ---

 :-D

hgs:
Danke für´s teilen (Y)

Siggit:

--- Quote from: hgs on July 12, 2023, 02:57:33 PM ---Danke für´s teilen (Y)

--- End quote ---
Gerne doch.  :-)

Navigation

[0] Message Index