Vertikal center responsive iframe

Ich bin mit der Technik hier beschrieben um einen iframe (video) reagiert. Im wesentlichen der iframe ist absolut positioniert in einem wrapper-element mit 100% Breite. Die wrapper-element hat padding set, basierend auf dem Seitenverhältnis des Videos:

.embed-responsive {
    position: relative;
    /* video height /video width */
    padding-bottom: 56.2%;
    height: 0;
    overflow: hidden;
}
.embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Ich muss in der Lage sein, um die Mitte der iframe vertikal in der übergeordneten container (100% height).

Habe ich erreicht diese, bevor Sie diese Technik aber es funktioniert nur auf inline-block Elemente. Wenn ich .embed-responsive zu inline-block es bricht.

Also gibt es eine alternative (vorzugsweise nur CSS) Technik, die ich verwenden können, um die vertikal-center der iframe, während immer noch reagieren? Das muss funktionieren, da der browser in der Größe geändert wird.

http://jsfiddle.net/benfosterdev/xfA3L/

InformationsquelleAutor Ben Foster | 2014-02-08
  1. 7

    So, ich dachte mir, diese nach 2 Minuten posting 🙂

    Machen .embed-resposive absolut positioniert mit top:50% - und margin-top set, um die Hälfte der Höhe-Verhältnis (video height /video width) /2 ich kann es mittig vertikal:

    .embed-responsive {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    /* video height /video width */
    padding-bottom: 56.2%;
    /* the above value * 0.5 */
    margin-top: -28.1%;
    height: 0;
    overflow: hidden;
}

    Fiddle aktualisiert wurde.

    • Sie sollte erwähnt haben die umschließenden div-container mit height: 100%, wie gezeigt, in Ihrer Frage ist der fiddle-Beispiel fand ich es von entscheidender Bedeutung, um es zu arbeiten.
    • Das macht mein video so groß wie das gesamte Fenster, und stellt den leeren Raum unterhalb 🙁
    InformationsquelleAutor Ben Foster
Schreibe einen Kommentar