web-dev-qa-db-fra.com

définir automatiquement la hauteur de l'iframe

J'ai besoin d'intégrer une page HTML dans un cadre et j'utilise le code suivant:

<iframe src="http://www.google.com" style="width: 90%; height: 300px"
    scrolling="no" marginwidth="0" marginheight="0" frameborder="0"
    vspace="0" hspace="0">

J'essaie de régler la hauteur sur auto pour que l'image redimensionne automatiquement la longueur de la page sans avoir à coder en dur la hauteur comme je le fais ici. J'ai essayé height:auto et height:inherit mais cela n'a pas fonctionné.

htmlhtml5
11
user1415780

Essayez ce codage

<div>
    <iframe id='iframe2' src="Mypage.aspx" frameborder="0" style="overflow: hidden; height: 100%;
        width: 100%; position: absolute;"></iframe>
</div>
15
Golda

Si les sites se trouvent sur des domaines distincts, la page d'appel ne peut pas accéder à la hauteur de l'iframe en raison de restrictions de domaine entre navigateurs. Si vous avez accès aux deux sites, vous pourrez peut-être utiliser le [document domain hack] . 1 Alors les liens de anroesti devraient vous aider.

3
jcaponi

Si vous utilisez un framework comme Bootstrap, vous pouvez rendre n'importe quelle vidéo iframe réactive en utilisant cet extrait: 

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="vid.mp4" allowfullscreen></iframe>
</div>
2
Solomon Antoine

La réponse de Solomon à propos du bootstrap m'a inspiré l'ajout du CSS utilisé par la solution bootstrap, ce qui me convient parfaitement.

.iframe-embed {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}
.iframe-embed-wrapper {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
.iframe-embed-responsive-16by9 {
    padding-bottom: 56.25%;
}
<div class="iframe-embed-wrapper iframe-embed-responsive-16by9">
    <iframe class="iframe-embed" src="vid.mp4"></iframe>
</div>
1
user323774