Sensible iframe avec un max de largeur et de hauteur

J'ai une hauteur fixe récipient contenant à la fois des images et des iframes. Pour rendre les images sensibles et de prévenir à la fois verticale et horizontale de débordement, je peux juste mettre le code CSS suivant:

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

Ceci permet d'obtenir une image de portrait ne serait pas de débordement à la verticale et une image de paysage ne serait pas de débordement à l'horizontale.

Pour les iframes, je suis en utilisant le "padding-ratio" technique, le réglage du remplissage de l'élément wrapper pour le ratio d'aspect 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 s'adapte à la largeur de la fenêtre d'affichage ne fonctionne pas de la même si je change la hauteur de la fenêtre d'affichage. Essentiellement, je voudrais l'iframe pour imiter la façon dont les images de travail.

Je suis en train d'accomplir presque la même, mais je n'ai pas de hauteur fixe. J'ai des images et des iframes, et je souhaite que les iframes pour mimify ce que max-width ne à images. Avez-vous trouvé votre solution dans l'intervalle?

OriginalL'auteur Ben Foster | 2014-02-08

  1. 10

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

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

    Il ne nécessite pas l'image des espaces réservés, il est donc beaucoup plus simple.

    C'est assez génial!

    OriginalL'auteur Caitlin M

  2. 5

    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

    OriginalL'auteur Erik Hopkins

  3. 3

    Ici est la correction que j'ai le sentiment qu'il pourrait travailler pour vous, mais vous avez à faire des compromis pour "padding ratio" techniqe parce que 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

    Cette démo déborde de la fenêtre d'affichage si la fenêtre est "trop court" (ou la fenêtre est trop grande).

    OriginalL'auteur Syed