Author Topic: Videos als I-Frame nebeneinander und Text unter dem Video  (Read 551 times)

Offline Siggit

  • Posts: 150
Videos als I-Frame nebeneinander und Text unter dem Video
« on: July 11, 2023, 01:46:13 PM »
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.

« Last Edit: July 11, 2023, 01:56:22 PM by Siggit »

Offline Siggit

  • Posts: 150
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>

 :-D

Offline hgs

  • Betatester
  • **
  • Posts: 1799
    • EFG MG
Re: Videos als I-Frame nebeneinander und Text unter dem Video
« Reply #2 on: July 12, 2023, 02:57:33 PM »
Danke für´s teilen (Y)
LG Harald

"Fange nie an, aufzuhören - höre nie auf, anzufangen." Marcus Tullius Cicero (106-43 v.Chr.)

"Never begin to stop - never stop beginning." Marcus Tullius Cicero (106-43 BC)

Offline Siggit

  • Posts: 150
Re: Videos als I-Frame nebeneinander und Text unter dem Video
« Reply #3 on: July 18, 2023, 10:22:04 AM »
Danke für´s teilen (Y)
Gerne doch.  :-)