FreshFries: YouTube-Video nicht in voller Höhe einbinden

Hallo Freunde,

ich würde gerne ein YouTube-Video auf meiner Webseite einbinden. Bei diesem Video soll jedoch nur rund 60% der Höhe zu sehen sein. Leider skaliert er das Video aber immer so, wenn ich den Embed Code von YouTube nutze, dass 100% der Höhe zu sehen ist und dafür weniger Breite. Gibt es eine Möglichkeit das nicht skalieren zu lassen?

Viele Grüße, Stefan

  1. Hallo FreshFries,

    du müsstest das mit einen Rahmencontainer in passender Größe lösen können, der auf "overflow:hidden" steht. Das Video hängt dann unten hinaus, dieser Teil ist aber nicht sichtbar.

    Wenn Du das tust, frage Dich aber auch, ob das was Du da tust auch richtig ist. Was befindet sind in dem beschnittenen Teil des Videos, den Du nicht anzeigst? Letztlich veränderst Du das Seh-Erlebnis der Anwender durch den Beschnitt, und das kann die Lizenz verletzen, unter der das Video in Youtube bereitgestellt wurde.

    Rolf

    --
    sumpsi - posui - clusi
    1. Hallo Rolf,

      der Kunde (dem sowohl das Video als auch die Webseite gehört) will das Video leider nur in einer begrenzten Höhe angezeigt bekommen. Ihm das auszureden war leider nicht machbar ;) Die Lösung mit Overflow Hidden haben wir probiert. Leider ist YouTube uns da scheinbar einen Schritt voraus und skaliert trotzdem runter. Hier mal mein Code. Sobald ich die Höhe änder, skaliert er das Video. (das Video was ich hier im Code habe ist nicht das Video welches wirklich auf die Webseite soll keine Sorge, würde nur ungerne den Kunden hier outen ;))

      <div class="responsive-video">
      	<iframe id="ytplayer" type="text/html" width="100%" height="1070px" src="https://www.youtube.com/embed/lIiUR2gV0xk?modestbranding=1&controls=0&rel=0&showinfo=1&autoplay=1&loop=1&mute=1&playlist=lIiUR2gV0xk" frameborder="0" allowfullscreen ></iframe>
      </div>
      
      <style>
      .responsive-video iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      }
      .responsive-video {
      position: relative;
      padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
      padding-top: 0px;
      height: 0;
      overflow: hidden;
      }
      </style>
      

      Vll siehst du einen Fehler? :)

      Viele Grüße, Stefan

      1. Hallo FreshFries,

        Youtube ist unschuldig. Computer tun nie, was sie sollen, sondern das, was Du ihnen sagst.

        Nimm mal width und height aus dem iframe-Element weg, mach das nur mit CSS.

        Das Breite/Höhe Verhältnis des Videos ist 5:4, wie mir scheint. Ihr liegt mit eurem Padding-Trick also gar nicht falsch, ihr müsst nur 80% einstellen. Das ist natürlich ärgerlich, wenn ihr andere Videos einbettet, die einen anderen Aspekt haben. Da sehe ich aber wenig Chancen; Youtube passt das Video so in den iframe ein dass es unter Beibehaltung des Aspect möglichst groß wird. In der anderen Richtung zentrieren sie das Video. Wenn ihr einen Youtube-Parameter habt, mit dem ihr ein "top-align" im iframe bekommt, könnt ihr euch das Leben eventuell einfacher machen.

        Wie auch immer; der Trick, wie man die Höhe eines Elements basierend auf seiner Breite einstellt (also einen festen Aspect-Ratio definiert), geht jedenfalls etwas anders:

        <div class="responsive-video">
           <iframe...></iframe>
           <div class="aspectSetter"></div>
        </div>
        
        .responsive-video {
           width: 100%; /* zum Beispiel */
           position:relative;
        }
        .responsive-video .aspectSetter {
           padding-top: 80%;
        }
        .wrapper iframe { /* der war richtig */ }
        

        Mit :after im CSS geht das etwas geschickter - lass das aspectSetter DIV einfach weg und zaubere es per CSS hinein:

        <div class="responsive-video">
           <iframe...></iframe>
        </div>
        
        .responsive-video {
           width: 100%; /* zum Beispiel */
           position:relative;
        }
        .responsive-video:after {
           padding-top: 80%;
           display: block;  content: '';  /* diese beiden sind wichtig! */
        }
        .wrapper iframe { /* der war richtig */ }
        

        So weit, so gut. Jetzt legst Du NOCHMAL einen Wrapper drumherum – eher einen Cutter :) – der das auf die gewünschte 16:9 Form schneidet. Den bisherigen Wrapper musst Du dann natürlich auf position:absolute ändern.

        So zum Beispiel, mit div statt iframe im Inneren

        Rolf

        --
        sumpsi - posui - clusi