wake-up-neo.net

Responsive Video-Iframes (nur das Seitenverhältnis beibehalten) nur mit CSS?

Ich verwende normalerweise eine ähnliche Lösung wie diese . So etwas wie:

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

Dieses Mal habe ich jedoch keinen Zugriff auf den HTML- oder JavaScript-Code. Daher kann ich keinen Wrapper verwenden, um den height:0 zu verhindern.

Gibt es eine Möglichkeit, einen Iframe nur mit CSS ansprechbar zu machen (und das Verhältnis zu halten)?

Versucht dies (arbeitet mit dem iframe, aber nicht mit seinem Inhalt):

iframe {
    width: 100%;
    background: red;
    height: 0;
    padding-bottom: 33%;    
}

Geige

Irgendwelche Gedanken? Keine Notwendigkeit, alte Browser zu unterstützen, so wäre selbst eine CSS3-Lösung großartig.

31

Verwenden Sie die neuen CSS-Ansichtsfenster-Einheitenvw und vh (Breite des Ansichtsbereichs/Höhe des Ansichtsfensters)

GEIGE

iframe {
    width: 100vw; 
    height: 56.25vw; /* 100/56.25 = 560/315 = 1.778 */
    background:red;  
}

Browser-Unterstützung ist auch gut: IE9 + ( caniuse )

35
Danield

Hier ist ein Fiddle für eine Lösung, die auf einem CSS2-Geheimnis basiert: https://jsfiddle.net/59f9uc5e/2/

<div class="aspect-ratio">
  <iframe src="" width="550" height="275" frameborder="0"></iframe>
</div>

<style>
/* This element defines the size the iframe will take.
   In this example we want to have a ratio of 25:14 */
.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56%; /* The height of the item will now be 56% of the width. */
}

/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
</style>

Es wird erklärt, wie Prozentwerte für das Auffüllen behandelt werden:

Der Prozentsatz wird in Bezug auf die Breite des Blockes der generierten Box berechnet, auch für 'padding-top' und 'padding-bottom'.

https://www.w3.org/TR/CSS2/box.html#padding-properties

38
SimonSimCity

Calc Funktion macht es viel lesbarer:

.iframe-video {
    width: 755px;
    height: 424px;
    max-width: 100%;
    max-height: calc((100vw - 40px) / (16/9));
}
  • width und height entsprechen der Desktopgröße und greifen auch auf alte Browser zurück
  • 40px ist Rand (20 px zwischen Iframe-Rand und Ansichtsfenster-Rand auf beiden Seiten)
  • 16/9 ist das Verhältnis des Videos (wenn Sie einen Edge-to-Edge-Player haben)
1
Bobík

Dies ist eine Art Hacker, aber Sie können Bilder verwenden, um das Seitenverhältnis eines Videos zu erhalten. Zum Beispiel bin ich zu Paint gegangen und habe ein Bild mit einer Auflösung von 1280 x 720 gespeichert, um ein Seitenverhältnis von 16: 9 zu verwenden (hier werde ich einfach ein leeres Bild irgendwo aus dem Internet holen).

Dies funktioniert, weil das Bild automatisch skaliert wird, wenn Sie die Breite eines Bildes ändern, während Sie die Höhe automatisch lassen. Dadurch werden die Proportionen automatisch skaliert.

img {
  display: block;
  height: auto;
  width: 100%;
}
iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.wrapper {
  float: left;
  position: relative;
}
<div class="wrapper">
  <img src="http://www.solidbackgrounds.com/images/1280x720/1280x720-ghost-white-solid-color-background.jpg" alt=""/>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>

0
Fly1nP4nda