Échelle et repositionnement iframe comme arrière-plan-taille: couverture

similaire à la réponse D'Alvaro Menendez, le crédit doit aller à cette réponse stackoverflow.com/a/29997746/3400962 par Qwertman. Je suis allé aussi loin que l'utilisation du "pourcentage de remplissage" tour, mais cette réponse de l'utilisation Intelligente des unités de viewport est cruciale pour ce travail.

la clé de la mise en œuvre de ce comportement est d'assurer deux choses:

1. que le iframe maintient toujours le même rapport d'aspect que son contenu vidéo 16: 9. Cela permettra d'assurer qu'aucun noir "padding" est présent autour de l'extérieur de la vidéo
2. que le iframe remplit toujours le height ou width selon la taille du viewport

une façon de maintenir le rapport d'aspect d'un élément est d'utiliser le "pourcentage de rembourrage "astuce qui tire avantage du fait que top et bottom padding utilise le width de l'élément comme base pour leur valeur. En utilisant la formule B / (A / 100) = C% nous pouvons calculer le pourcentage requis pour le rembourrage. Étant donné que la vidéo a un ratio de 16 : 9 cela se traduit par 9 / (16 / 100) = 56.25.

le seul problème est que dans votre cas le calcul est nécessaire à la fois pour l'axe horizontal et l'axe vertical (comme nous ne savons pas quelles dimensions le viewport sera) et cette astuce ne fonctionnera pas avec left et right padding pour obtenir le rapport d'aspect par rapport au height .

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.container {
    background: #eee;
    height: 100%;
    overflow: hidden;
    padding: 0;
    position: relative;
}
.inner {
    left: 50%;
    min-height: 43.75%;
    padding-top: 56.25%;
    position:absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
.container iframe {
    bottom: 0;
    height: 100%;
    left: 0;
    position:absolute;
    right: 0;
    top: 0;
    width: 100%;
}

<div class="container">
    <div class="inner">
        <iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
    </div>
</div>

https://jsfiddle.net/w45nwprn/ (Extrait de ne pas montrer la vidéo, veuillez consulter le violon)

heureusement, dans votre cas, vous voulez que la vidéo s'adapte à l'écran entier afin unités de viewport peut être utilisé pour calculer le rapport d'aspect au lieu de pourcentages. Cela permet d'utiliser pour calculer le width dans rapport à la height et vica versa:

• left: 50%; , top: 50%; et transform: translate(-50%, -50%); sont nécessaires pour centrer le iframe dans .container
• min-height: 100%; et min-width: 100%; sont nécessaires pour s'assurer que le height et width ne sont jamais plus petit que celui de .container
• height: 56.25vw; définira le height par rapport au width du viewport. C'est calculé en faisant 9 / (16 / 100) = 56.25
• width: 177.77777778vh; définira le width par rapport au height du viewport. Cela est calculé en faisant 16 / (9 / 100) = 177.77777778

parce que les height et width ne peuvent jamais être en dessous de 100% mais doivent rester dans le bon rapport d'aspect la vidéo couvrira toujours l'ensemble du viewport.

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.container {
    background: #eee;
    height: 100%;
    overflow: hidden;
    padding: 0;
    position: relative;
}
iframe {
    box-sizing: border-box;
    height: 56.25vw;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    width: 177.77777778vh;
}

<div class="container">
    <iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

https://jsfiddle.net/qk00ehdr/ (Extrait de ne pas montrer la vidéo, veuillez consulter le violon)

les unités de Viewport sont largement supportées , aussi longtemps que vous ne ciblez pas les vieux navigateurs cette méthode devrait fonctionner.