germanfrogman: responsiver iframe in der maximalen Größe begrenzen

SELF-Forum

responsiver iframe in der maximalen Größe begrenzen

germanfrogman Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo Leute,

zuerst mal wünsche ich allen hier einen schönen Sonntag.

Ich habe auf meiner Webseite Youtube-Videos eingebettet. Damit diese auch auf dem Handy gut aussehen und nicht gescrollt werden muss wollte ich diese responsiv der Größe anpassen.

Dazu habe ich ein Snippet gefunden was bei der Scalierung für kleinere Viewports auf funktioniert. Leider wird dadurch das Video aber zu groß auf der Desktop-Ansicht. Ich wollte das mit einem umgebenden Div begrenzen, klappt aber irgendwie nicht.

HTML: <div class="out"> <div class="responsive-video"> <iframe width="800" height="450" src="https://www.youtube.com/embed/v-oOOQr1ieY?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div>

CSS: .out { position: relative; max-width:800px max-height:450px; }

.responsive-video { position: relative; padding-bottom: 56%; padding-top: 30px; height: 0; overflow: hidden; }

.responsive-video iframe,
.responsive-video object,
.responsive-video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

…

Hier der Link: http://www.dendrowiki.org/test5.html

An welcher Schraube muss ich drehen damit es klappt? Vielen Dank im Voraus.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. responsiver iframe in der maximalen Größe begrenzen

    germanfrogman
    – Informationen zu den Bewertungsregeln

    Habe es selber hinbekommen. Schönes Rest-WE noch

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln