web-dev-qa-db-fra.com

Scale iFrame css width 100% comme une image

Je souhaite redimensionner un iFrame via CSS en width: 100%, et la hauteur doit être proportionnelle à la largeur.

Avec un <img> tag cela fonctionne très bien.

L'image et l'iFrame ont défini la largeur et la hauteur dans le code HTML.

Voici quelques exemples:

<html>
    <style>
        #a{ width: 500px; }
        img{ width: 100%; height: auto }
    </style>
    <body>
        <div id="a">
            <img src="http://lorempixel.com/200/150/" width="200" height="150" />
        </div>
    </body>

Cela fonctionne très bien sur les images, mais j'aimerais le même comportement pour iFrames:

<html>
    <style>
        #a{ width: 900px; background: grey;}
        iframe{ width: 100%; height: auto }
    </style>
    <body>
        <div id="a">
            <iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe>
        </div>
    </body>

Le format iFrame est 100% large, mais sa hauteur n’est pas proportionnelle à la hauteur de celle de l’image.

cssiframeresponsive-design
52
Oliver

La grande différence entre une image et un iframe réside dans le fait qu'une image conserve son format. Vous pouvez combiner une image et un iframe avec un iframe réactif. J'espère que cela répond à votre question.

Vérifiez ce lien par exemple: http://jsfiddle.net/Masau/7WRHM/

HTML:

<div class="wrapper">
    <div class="h_iframe">
        <!-- a transparent image is preferable -->
        <img class="ratio" src="http://placehold.it/16x9"/>
        <iframe src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
    </div>
    <p>Please scale the "result" window to notice the effect.</p>
</div>

CSS:

html,body        {height:100%;}
.wrapper         {width:80%;height:100%;margin:0 auto;background:#CCC}
.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

remarque: cela ne fonctionne qu'avec un format d'image fixe.

110
Rik

@Rik, je suppose que c'est une approche plus propre. Cela fonctionne avec les propriétés inline 'height' et 'width' (j'ai mis une valeur aléatoire dans le violon pour le prouver) et avec la propriété CSS 'max-width' (@Walf me lisez-vous?).

HTML:

<div class="wrapper">
    <div class="h_iframe">
        <iframe height="2" width="2" src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
    </div>
    <p>Please scale the "result" window to notice the effect.</p>
</div>

CSS:

html,body        {height: 100%;}
.wrapper         {width: 80%; max-width: 600px; height: 100%; margin: 0 auto; background: #CCC}
.h_iframe        {position: relative; padding-top: 56%;}
.h_iframe iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

http://jsfiddle.net/7WRHM/1001/

56
Simone Lazzari

J'aime mieux cette solution. Simple, évolutif, réactif. L'idée ici est de créer une division externe de hauteur nulle avec un remplissage inférieur réglé sur le rapport d'aspect de la vidéo. L'iframe est mis à l'échelle à 100% en largeur et en hauteur, remplissant complètement le conteneur extérieur. Le conteneur externe ajuste automatiquement sa hauteur en fonction de sa largeur et l'iframe inside se règle en conséquence.

<div style="position:relative; width:100%; height:0px; padding-bottom:56.25%;">
    <iframe style="position:absolute; left:0; top:0; width:100%; height:100%"
        src="http://www.youtube.com/embed/RksyMaJiD8Y">
    </iframe>
</div>

La seule variable ici est la valeur padding-bottom dans la division externe. C'est 75% pour les vidéos au format 4: 3 et 56,25% pour les vidéos au format 16: 9 grand écran.

13
Anachronist

Vous pouvez utiliser les unités de fenêtre d'affichage ici au lieu de%. Comme ça:

iframe {
    max-width: 100vw;
    max-height: 56.25vw; /* height/width ratio = 315/560 = .5625 */
}

DÉMO (redimensionner pour voir l'effet)

body {
  margin: 0;
}
.a {
  max-width: 560px;
  background: grey;
}
img {
  width: 100%;
  height: auto
}
iframe {
  max-width: 100vw;
  max-height: 56.25vw;
  /* 315/560 = .5625 */
}
<div class="a">
  <img src="http://lorempixel.com/560/315/" width="560" height="315" />
</div>

<div class="a">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe>
</div>
4
Danield

@Anachronist est le plus proche ici, @Simone pas loin. L'avertissement avec le pourcentage de remplissage sur un élément est qu'il est basé sur sa largeur du parent; ainsi, s'il est différent de votre conteneur, les proportions seront faussées.

La réponse la plus fiable et la plus simple est:

body {
  /* for demo */
  background: lightgray;
}
.fixed-aspect-wrapper {
  /* anything or nothing, it doesn't matter */
  width: 60%;
  /* only need if other rulesets give this padding */
  padding: 0;
}
.fixed-aspect-padder {
  height: 0;
  /* last padding dimension is (100 * height / width) of item to be scaled */
  padding: 0 0 56.25%;
  position: relative;
  /* only need next 2 rules if other rulesets change these */
  margin: 0;
  width: auto;
}
.whatever-needs-the-fixed-aspect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* for demo */
  border: 0;
  background: white;
}
<div class="fixed-aspect-wrapper">
  <div class="fixed-aspect-padder">
    <iframe class="whatever-needs-the-fixed-aspect" src="/"></iframe>
  </div>
</div>
3
Walf