WebsiteBaker Community Forum

WebsiteBaker Support (2.13.x) => General Help & Support => Hilfe & Support (deutsch) => Topic started by: Siggit on July 11, 2023, 01:46:13 PM

Title: Videos als I-Frame nebeneinander und Text unter dem Video
Post by: Siggit 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.

Title: Re: Videos als I-Frame nebeneinander und Text unter dem Video!!! Gelöst!!!
Post by: Siggit on July 11, 2023, 02:18:44 PM

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

Title: Re: Videos als I-Frame nebeneinander und Text unter dem Video
Post by: hgs on July 12, 2023, 02:57:33 PM

Danke für´s teilen (Y)

Title: Re: Videos als I-Frame nebeneinander und Text unter dem Video
Post by: Siggit on July 18, 2023, 10:22:04 AM

Quote from: hgs on July 12, 2023, 02:57:33 PM

Danke für´s teilen (Y)

Gerne doch.  :-)