it-swarm.com.de

Wie kann ich den YouTube-Player auf die Breite der Seite skalieren, aber auch das Seitenverhältnis beibehalten?

Ich habe ein YouTube-Video, das ich auf meiner Webseite veröffentlichen möchte.

Ich möchte das Video so skalieren, dass es zu einem Prozent des Browser des Benutzers passt, aber auch, um das Seitenverhältnis beizubehalten. 

Ich habe das ausprobiert:

<iframe width="87%" height="315" src="http://www.youtube-nocookie.com/embed/dU6OLsnmz7o" frameborder="0" allowfullscreen></iframe>

Aber das macht den Spieler nur weiter, nicht höher.

Muss ich auf JavaScript (oder Nicht-Standard-CSS) zurückgreifen?

34
Frank

Ich habe ein ähnliches Problem mit meiner Site gefunden, als ich responsives CSS entwickelte. Ich wollte, dass die Größe von eingebetteten Youtube-Objekten mit Aspekt geändert wird, wenn vom Desktop-CSS zu einem kleineren Format gewechselt wird (ich verwende Medienabfragen, um Inhalte für mobile Geräte erneut zu rendern).

Ich entschied mich für eine Lösung, die auf CSS und Markup basierte. Grundsätzlich habe ich drei Videoklassen in meinem CSS:

.video640 {width: 640px; height: 385px}
.video560 {width: 560px; height: 340px}
.video480 {width: 480px; height: 385px}

… Und ich ordne eine davon dem von mir eingeschlossenen Youtube-Inhalt zu, abhängig von seiner ursprünglichen Größe (Sie benötigen möglicherweise mehr Klassen, ich habe nur die gängigsten Größen ausgewählt).

In der Medienabfrage CSS für kleinere Geräte werden dieselben Klassen einfach wie folgt neu angegeben:

.video640 {width: 230px; height: 197px}
.video560 {width: 230px; height: 170px}
.video480 {width: 240px; height: 193px}

Ich schätze es, wenn Sie Videos in Ihren HTML-Code einbinden (dh eine Klasse hinzufügen), wenn Sie Videos hinzufügen möchten. Wenn Sie jedoch nicht die Javascript-Route wählen möchten, funktioniert dies ziemlich gut. Geben Sie Ihre Videoklassen für beliebig viele Größen an. So sieht das Youtube-Markup aus:

<object class="video640" type="application/x-shockwave-flash" value="YOUTUBE URL">
  <param name="movie" value="YOUTUBE URL"></param>
</object>
15
Ben

Was ich für die beste CSS-Lösung halte.

.auto-resizable-iframe {
  max-width: 420px;
  margin: 0px auto;
}

.auto-resizable-iframe > div {
  position: relative;
  padding-bottom: 75%;
  height: 0px;
}

.auto-resizable-iframe iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
<div class="auto-resizable-iframe">
  <div>
    <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
  </div>
</div>

Demo http://jsfiddle.net/JBhp2/

62
Darwin

Ganz einfach mit etwas Javascript.

jQuery(function() {
    function setAspectRatio() {
      jQuery('iframe').each(function() {
        jQuery(this).css('height', jQuery(this).width() * 9/16);
      });
    }

    setAspectRatio();   
    jQuery(window).resize(setAspectRatio);
});
11
Darwin

Dieses jQuery-Plugin hat in letzter Zeit die Runde gemacht. Es heißt FitVids und macht genau das, was Sie brauchen.

http://fitvidsjs.com/

10
Ben Everard

Der Trick, um ein Youtube-Video automatisch zu vergrößern, besteht darin, die Breite des Iframes auf 100% zu setzen und in ein Div mit einem "Padding-Bottom" zu setzen, der dem Seitenverhältnis in Prozent entspricht. Z.B.

Aber das Problem ist - Sie hätten schon viele Seiten mit eingebetteten YoutTube-Videos. Hier ist ein Jquery-Plugin, das alle Videos auf der Seite scannt und ihre Größe automatisch ändert, indem der Iframe-Code wie oben angegeben geändert wird. Das bedeutet, dass Sie keinen Code ändern müssen. Fügen Sie das Javascript hinzu und alle Ihre YouTube-Videos werden autoresizing . https://skipser.googlecode.com/files/youtube-autoresizer.js

2
arunskrish

Sie können zwei Klassen verwenden, die die Größe des Videos basierend auf der Größe des Wrapping-Div skalieren. Betrachten Sie dieses Beispiel: 

<div class="content-wrapper">
    <div class="iframe-wrapper res-16by9">   
        <iframe src="https://www.youtube.com/embed/pHsYFURtzzY" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Schauen Sie sich jetzt die css an. 

.content-wrapper{
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
}

.iframe-wrapper{
  width: 100%;
  position: relative;
}

.res-4by3{
  padding-bottom: 75%;
}

.res-16by9{
  padding-bottom: 56.25%;
}

.iframe-wrapper iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Beachten Sie, dass Sie den iframe in ein div einfassen müssen, dessen Breite auf 100% und die Position auf relativ gesetzt ist. Sie müssen dem iframe-Wrapper auch eine Bodenauffüllung hinzufügen. Diese Auffüllung definiert die Höhe eines Videos. Ich empfehle, zwei Klassen zu erstellen, die das Bildverhältnis darstellen. 

Es ist ziemlich einfach, die rechte untere Auffüllung für Wrapper zu berechnen, die eine bestimmte Auflösung darstellen. Zum Beispiel für res 4 von 3 und 16 von 9 hätte das Bottom-padding gleich:

[4/3 res]

100/4 * 3 = 75%;

[16/9 res]

100/16 * 9 = 56,25%

Positionieren Sie dann den iframe als absolut und schieben Sie ihn in die obere linke Ecke des umlaufenden div. Stellen Sie außerdem sicher, dass Breite und Höhe von iframe auf 100% gesetzt werden. Jetzt musst du noch etwas tun. Du bist fertig.

Fügen Sie die Klasse hinzu, die zur richtigen Auflösung passt. Es skaliert die Bildbreite und -höhe bzw. behält die richtigen Proportionen bei.

Das obige Beispiel funktioniert für jeden Iframe. Das bedeutet, dass Sie es auch für Google Maps-Iframes verwenden können. 

1
DevWL

Alte Frage, aber ich denke, die @media CSS 3-Tags wären in diesem Fall hilfreich.

Hier ist meine Lösung für ein ähnliches Problem.

Das CSS:

@media only screen and (min-width: 769px) {
    .yVid {
        width: 640px;
        height: 360px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 768px) {
    .yVid {
        width: 560px;
        height: 315px;
        margin: 0 auto;
    }
}

Das HTML:

<div class="yVid">
    <iframe width="100%" height="100%" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
</div>

Dies fügt im Wesentlichen einen Haltepunkt bei 768 Pixeln hinzu, an dem sich das Video selbst ändert. Sie können auch Haltepunkte bei 992 und 1280 hinzufügen, um eine noch rücksichtslosere Videogröße zu erzielen. (Zahlen basieren auf Bootstrap-Standardgrößen). 

1
todd.pund

Das hat bei mir funktioniert. Dies ist ein geringfügig modifizierter Code aus dem YouTube Embed Code Generator .

Das CSS:

.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.27198%;
    }
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

Das HTML:

<div class="video-container">
    <iframe width="560px" height="315px" src="https://www.youtube.com/embed/XXXXxxxx?&theme=dark&autohide=2&iv_load_policy=3"><iframe>
</div>
0
Lenwood

Neben Darwin und Todd wird dies folgende Lösung sein 

  1. vermeiden Sie den unteren Rand
  2. maximieren Sie die Breite für große Bildschirme 
  3. minimieren Sie die Höhe in der mobilen Ansicht
  4. behalten Sie eine feste Größe für @media-kompatible Browser bei 

Das HTML:

<div class="video_player">
  <div class="auto-resizable-iframe">
    <div>
      <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM">        </iframe>
    </div>
  </div>
</div>

Das CSS:

.videoplayer{

    text-align: center;
    vertical-align: middle;

    background-color:#000000;

    margin: 0;
    padding: 0;

    width: 100%;
    height:420px;

    overflow:hidden;

    top: 0;
    bottom: 0;

}

.auto-resizable-iframe {
    width:100%;
    max-width:100%;
    margin: 0px auto;
}

.auto-resizable-iframe > div {
    position: relative;
    padding-bottom:420px;
    height: 0px;
}

.auto-resizable-iframe iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}


//full screen
@media (min-width:0px) {

    .videoplayer{
        height:100%;
    }

    .auto-resizable-iframe > div {
        padding-bottom:100%;
    }           

}

//mobile/pad view
@media (min-width:600px) {

    .videoplayer{
        height:420px;
    }

    .auto-resizable-iframe > div {
        padding-bottom:420px;
    }       

}       
0
RafaSashi

Sie können style="max-width: %87; max-height: %87;" verwenden

0
Umur Kontacı

Stellen Sie einfach die Höhe und Breite des Iframes mit der CSS-Metrik vw ein. Es verwendet die Gerätebreite als Parameter:

.videoWrapper iframe {
    height: 36.6vw;
    width: 65vw; 
}
0
Karl Zillner

In der Liste der Antworten gibt es einige Vorschläge, wie Sie mit js die Struktur des generierten Iframes ändern können. Ich denke, es besteht ein Risiko damit, denn wenn Sie den iframe in andere Elemente einwickeln, kann es sein, dass die YouTube-API die Verbindung mit dem iframe verliert (insbesondere wenn Sie das Element als Knoten übergeben, anstatt eine spezifische ID wie mich zu verwenden). . Es ist eher, um es tatsächlich zu umgehen, verwenden Sie Javascript, um den Inhalt zu ändern, bevor Sie den YouTube-Player tatsächlich auslösen.

ein Ausschnitt aus meinem Code:

/**
 * Given the player container, we will generate a new structure like this
 *
 * <div class="this-is-the-container">
 *      <div class="video-player">
 *          <div class="auto-resizable-iframe">
 *              <div>
 *                  <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM">        </iframe>
 *              </div>
 *          </div>
 *      </div>
 * </div>
 *
 * @return {Node} the real player node deep inside
 */
YouTube.renderResizable = function (playerContainer) {
    // clean up the content of player container
    playerContainer.textContent = '';

    var playerDiv = document.createElement('div');
    playerDiv.setAttribute('class', 'video-player');

    playerContainer.appendChild(playerDiv);

    // add the auto-resizable-frame-div
    var resizeableDiv = document.createElement('div');
    resizeableDiv.setAttribute('class', 'auto-resizable-iframe');

    playerDiv.appendChild(resizeableDiv);

    // create the empty div
    var div = document.createElement('div');
    resizeableDiv.appendChild(div);

    // create the real player
    var player = document.createElement('div');
    div.appendChild(player);

    return player;
};
0
mr1031011