Iframes vidéo Responsive (garder le rapport d'aspect), avec seulement css?
J'utilise généralement une solution similaire à celle-ci
Quelque Chose comme:
.wrapper {
position:relative;
width:100%;
height:0;
padding-bottom:33%;
}
.wrapper iframe {
position:absolute;
left:0;
top: 0;
height: 100%;
width: 100%;
}
Mais cette fois je n'ai pas accès au code html ou au javascript donc je ne peux pas utiliser un wrapper pour empêcher le height:0
¿Existe-t-il un moyen de rendre un iframe réactif (et de garder le ratio) avec seulement CSS?
Essayé ce ( fonctionne avec l'iframe, mais pas avec son contenu )
iframe {
width:100%;
background:red;
height: 0;
padding-bottom: 33%;
}
Des idées? Pas besoin de prendre en charge les anciens navigateurs donc même un CSS3 solution serait génial
3 réponses
Voici un violon pour une solution, qui est basée sur un secret CSS2: https://jsfiddle.net/59f9uc5e/2/
<div class="aspect-ratio">
<iframe src="" width="550" height="275" frameborder="0"></iframe>
</div>
<style>
/* This element defines the size the iframe will take.
In this example we want to have a ratio of 25:14 */
.aspect-ratio {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%; /* The height of the item will now be 56% of the width. */
}
/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
.aspect-ratio iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
Cela s'explique par la façon dont les valeurs de pourcentage pour le remplissage sont gérées:
Le pourcentage est calculé par rapport à la largeur du bloc contenant la boîte générée, même pour 'padding-top' et 'padding-bottom'.
C'est une sorte de hackish mais vous pouvez utiliser des images pour préserver le rapport d'aspect d'une vidéo. Par exemple, je suis allé peindre et j'ai enregistré une image de résolution 1280 x 720 à utiliser pour un rapport d'aspect 16:9 (ici, je vais juste saisir une image vierge sur internet quelque part).
Cela fonctionne parce que si vous modifiez la largeur d'une image tout en laissant la hauteur auto, Vice-versa l'image sera automatiquement mise à l'échelle en gardant les proportions.
img {
display: block;
height: auto;
width: 100%;
}
iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.wrapper {
float: left;
position: relative;
}<div class="wrapper">
<img src="http://www.solidbackgrounds.com/images/1280x720/1280x720-ghost-white-solid-color-background.jpg" alt=""/>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>