web-dev-qa-db-fra.com

Iframes vidéo réactives (conservant les proportions) avec uniquement du CSS?

J'utilise habituellement une solution similaire à celle-ci . Quelque chose comme:

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

Mais cette fois, je n'ai pas accès au code HTML ou JavaScript, je ne peux donc pas utiliser un wrapper pour empêcher le height:0.

Existe-t-il un moyen de rendre un iframe réactif (et de conserver le rapport) avec uniquement du CSS?

J'ai essayé ceci (fonctionne avec l'iframe mais pas avec son contenu):

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

violon

Des pensées? Pas besoin de supporter les anciens navigateurs, même une solution CSS3 serait géniale.

htmlcssiframeresponsive-design
31
Toni Michel Caubet

Utilisez les nouvelles unités de fenêtres CSSvw et vh (largeur de la fenêtre/hauteur de la fenêtre)

VIOLON

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

Le support du navigateur est également bon: IE9 + ( caniuse )

35
Danield

Voici un Fiddle pour une solution basée sur un secret CSS2: 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>

Cela s'explique par la façon dont les valeurs de pourcentage pour le remplissage sont gérées:

Le pourcentage est calculé par rapport à la largeur du bloc contenant de la boîte générée, même pour 'padding-top' et 'padding-bottom'.

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

38
SimonSimCity

C'est une sorte de hackish, mais vous pouvez utiliser des images pour préserver le format d'image d'une vidéo. Par exemple, je suis allé dans Paint et ai enregistré une image de résolution 1280 x 720 à utiliser pour un rapport de format 16: 9 (ici, je vais simplement prendre une image vierge quelque part sur Internet).

Cela fonctionne car si vous modifiez la largeur d'une image tout en laissant la hauteur automatique, inversement, l'image sera automatiquement mise à l'échelle - en conservant les proportions.

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