Frage Zwei Youtube-Videos responsive nebeneinander einbette

[bilbo]

Hallo zusammen,

ich bin neu hier im Forum und möchte mich mit einer Frage an euch wenden.
Ich betreue die Homepage von meinem Sportverein (im Typo3) und stehe nun vor einem Problem.
Ich möchte gerne über ein HTML Inhaltselement zwei Videos von Youtube über einen iFrame nebeneinander einbetten.
Das Ganze habe ich nun auch soweit hinbekommen. Siehe hier: http://www.giesen-voba.de/medien/videos/

Nun möchte ich aber gerne, dass wenn man die Seite auf einem anderen Gerät (also Smartphone oder iPad) öffnet, das zweite Video in eine neue Zeile springt und nicht beide Videos nebeneinander kleiner werden.

Mein verwendeter Code:
<div style="float: left; width: 49%; position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 100%; overflow: hidden; "><iframe style="position: absolute; top:0; left: 0; width: 100%;height: 45%;" src="https://www.youtube.com/embed/kS8AfnOzCzM" frameborder="0" height="315" width="560"></iframe> </div>
<div style="float: right; width: 49%; position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 100%; overflow: hidden;"><iframe style="position: absolute; top:0; left: 0; width: 100%;height: 45%;" src="https://www.youtube.com/embed/yJBH-fVfG2s" frameborder="0" height="315" width="560"></iframe> </div>

Ein weiteres Problem was ich habe ist, dass die Vollbild ansicht komischerweise nicht möglich ist.

Vielen Dank für eure Hilfe.

Bilbo

 

[threadi]

Wenn Du eine responsive Ansicht erreichen willst, solltest Du die CSS-Eigenschaften nicht Inline definieren sondern in einer externen CSS-Datei und dann per Klasse den Elementen zuweisen. Dann hast Du auch die Chance ab von dir gewählten Breakpoints eine andere Ansicht für die Darstellung zu erreichen. Schau dir dazu z.B. diese Einführung in responsive Design an:
http://www.webmasterpro.de/coding/a...queries-fuer-iphone-ipad-und-smartphones.html

Die Vollbildfunktion bei Youtube wird imho durch Youtube begrenzt. Du hast dort auch eine Hilfeseite verlinkt wenn Du drauf klickst:
https://support.google.com/youtube/answer/6276924

Moderation: Verschoben von HTML zu CSS, da es primär um Gestaltung geht.