Kann mir bitte jemand helfen... Wie kriege ich auf Artikel-Seiten einen YouTube-Player responsiv eingebettet? Der unveränderte iframe-einbett-Code von YouTube verhält sich nicht responsiv und lässt den Player auf dem Handy (bei vertikaler Ansicht) etwas über das Fenster hinaus ragen. Responsiv habe ich bisher nur die Breite hinbekommen. Die Höhe des Players wird dabei irgendwie ignoriert / beschnitten. Oben mein halbgarer Versuch... ...unten original YouTube code. mein Code: Code: <p style="max-width:560px;max-height:315px;"> <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="100%" src="https://www.youtube-nocookie.com/embed/8P4VWJAsczQ" title="YouTube video player" width="100%"></iframe> </p> original code: Code: <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube-nocookie.com/embed/8P4VWJAsczQ" title="YouTube video player" width="560"></iframe> Was mach ich falsch? Bzw kann man es noch eleganter/einfacher/anders lösen?
Code: <div class="embed-responsive embed-responsive-16by9"> <iframe allowfullscreen="" class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/8P4VWJAsczQ"></iframe> </div>
ps: Kann man dabei für die Desktop-Ansicht auch die maximale Größe festlegen, z.B. width="560" height="315"? Habe versucht das dem div via style hinzuzufügen, aber dann verhält sich die Höhe wieder funky.
Ist das gleiche wie ohne "max-". Begrenzt die Breite aber die Höhe ist bei Desktop-Ansicht dann zu groß... und wird stufenweise kleiner. Fenster-kleinziehen in 3 Stufen: Ab der kleinsten Stufe bleibt es dann korrekt 16:9. Code: <div class="embed-responsive embed-responsive-16by9" style="max-width:560px;max-height:315px"> <iframe allowfullscreen="" class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/8P4VWJAsczQ"></iframe> </div>
Es funktioniert, wenn man die max-Größen einem weiteren, umschließenden div gibt: Code: <div style="max-width:560px;max-height:315px;"> <div class="embed-responsive embed-responsive-16by9"> <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" src="https://www.youtube-nocookie.com/embed/8P4VWJAsczQ" title="YouTube video player"></iframe> </div> </div>