web-dev-qa-db-fra.com

Iframe sensible avec une largeur et une hauteur maximales

J'ai un conteneur à hauteur fixe contenant à la fois des images et des iframes. Pour rendre les images réactives et éviter les débordements verticaux et horizontaux, je peux simplement définir le code CSS suivant:

img {
    max-width: 100%;
    max-height: 100%;
}

Cela garantit qu'une image de portrait ne débordera pas verticalement et qu'une image de paysage ne débordera pas horizontalement.

Pour les iframes, j'utilise la "technique de remplissage" technique , en définissant le remplissage de l'élément wrapper sur le rapport de format de l'iframe (par exemple 56,25% pour une vidéo 16: 9):

.iframe-wrapper {
    position: relative;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
}

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

Bien que cela signifie que l'iframe est mis à l'échelle avec la largeur de la fenêtre, il ne fonctionne pas de la même manière si je modifie la hauteur de la fenêtre. En gros, j'aimerais que l'iframe imite le fonctionnement des images.

cssiframeresponsive-design
13
Ben Foster

Pour mes utilisations (intégrer des vidéos de Vimeo sur un site responsive), cela fonctionne très bien dans les navigateurs que j'ai testés:

@media screen and (max-width: 750px) {
    iframe {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }
}

Il ne nécessite pas d'espaces réservés pour les images, c'est donc beaucoup plus simple.

10
Caitlin M

Ce code a fait l'affaire pour moi:

<div class="video-container"><iframe.......></iframe></div>

.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

Source: https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

5
Erik Hopkins

Voici la solution qui, à mon avis, pourrait fonctionner pour vous, mais vous devez faire un compromis sur la technique du "taux de remplissage", car ce n'est pas nécessaire;) 

HTML comme suit: 

<div class="embeded-video">
      <img class="ratio-img" src="http://placehold.it/16x9" alt="16:9 Image" />
      <iframe src="//www.youtube.com/embed/I_dN9IpmOZU" frameborder="0" allowfullscreen align="center"></iframe>
    </div>

CSS comme suit: 

.embeded-video {
    position: relative
}

.embeded-video .ratio-img {
    display: block;
    width: 100% !important;
    height: auto !important;
}

.embeded-video IFRAME {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Démo: http://codepen.io/anon/pen/MYbqgp?editors=110

3
Syed

Je ne sais pas s'il est possible de laisser la hauteur augmenter uniquement jusqu'à une hauteur maximale, mais il est possible de limiter la hauteur tout en préservant les proportions. Voici la technique astucieuse qui fait que ça marche ... Je n'ai pas écrit ce code, mais je l'ai utilisé et il semble bien fonctionner:

https://codepen.io/shshaw/pen/uzlfh

Copier et coller le code (légèrement modifié) ici pour la postérité ... (Ma principale modification consiste à utiliser vh unités au lieu d'un pourcentage.)

/* Adapted from https://codepen.io/shshaw/pen/uzlfh - thanks Shaw! */

.responsive-embed {
  height: 45vh; /* Set height here */
  display: inline-block; /* Must be inline-block */
  position: relative; /* Keep the child element contained */
  
  /* min/max-width will break the aspect ratio, but otherwise work as expected */
  /*
  min-height: 200px;
  max-height: 400px;
  */
}

.responsive-embed .ratio {
  height: 100%; /* Our ratio canvas is expanded to as tall as the height set above. */
  width: auto; /* Allows the width to adjust based in the height, keeping the aspect ratio */
  visibility: hidden; /* Prevents non-transparent image or alt text from showing up */
  text-align: left;
}

.responsive-embed iframe {
  /* Force the child block to be same size as parent */
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
<div class="responsive-embed">
  <img class="ratio" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAAAAAAeQfPuAAAAC0lEQVQYGWMYrAAAAJkAAWzZLOIAAAAASUVORK5CIIA=" alt="16x9">
  <iframe src="https://player.vimeo.com/video/20732587/?api=0&amp;portrait=0&amp;autoplay=0&amp;color=21abb9" width="100%" height="100%" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

0
Matt Browne