ejemplo - Escalar iFrame css ancho 100% como una imagen
iframe video (5)
@Anachronist está más cerca aquí, @Simone no está muy lejos. La advertencia con porcentaje de relleno en un elemento es que se basa en el ancho de sus padres , por lo que si es diferente a su contenedor, las proporciones estarán desactivadas.
La respuesta más confiable y simple es:
body {
/* for demo */
background: lightgray;
}
.fixed-aspect-wrapper {
/* anything or nothing, it doesn''t matter */
width: 60%;
/* only need if other rulesets give this padding */
padding: 0;
}
.fixed-aspect-padder {
height: 0;
/* last padding dimension is (100 * height / width) of item to be scaled */
padding: 0 0 56.25%;
position: relative;
/* only need next 2 rules if other rulesets change these */
margin: 0;
width: auto;
}
.whatever-needs-the-fixed-aspect {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* for demo */
border: 0;
background: white;
}
<div class="fixed-aspect-wrapper">
<div class="fixed-aspect-padder">
<iframe class="whatever-needs-the-fixed-aspect" src="/"></iframe>
</div>
</div>
Quiero escalar un iFrame a través de CSS al width: 100% , y la altura debe escalar proporcionalmente al ancho.
Con una etiqueta <img> esto funciona bien.
Tanto la imagen como el iFrame tienen ancho y alto definidos en html.
Aquí algunos ejemplos:
<html>
<style>
#a{ width: 500px; }
img{ width: 100%; height: auto }
</style>
<body>
<div id="a">
<img src="http://lorempixel.com/200/150/" width="200" height="150" />
</div>
</body>
Esto funciona muy bien en imágenes, pero me gustaría el mismo comportamiento para iFrames:
<html>
<style>
#a{ width: 900px; background: grey;}
iframe{ width: 100%; height: auto }
</style>
<body>
<div id="a">
<iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe>
</div>
</body>
El iFrame rinde un 100% de ancho pero no escala su altura proporcional como lo hace la imagen.
@Rik, supongo que este es un enfoque más limpio. Funciona con propiedades en línea de "altura" y "ancho" (establezco un valor aleatorio en el violín para demostrarlo) y con la propiedad CSS de "ancho máximo" (@Walf ¿me lees?).
HTML:
<div class="wrapper">
<div class="h_iframe">
<iframe height="2" width="2" src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
</div>
<p>Please scale the "result" window to notice the effect.</p>
</div>
CSS:
html,body {height: 100%;}
.wrapper {width: 80%; max-width: 600px; height: 100%; margin: 0 auto; background: #CCC}
.h_iframe {position: relative; padding-top: 56%;}
.h_iframe iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
La gran diferencia entre una imagen y un iframe es el hecho de que una imagen mantiene su relación de aspecto. Puede combinar una imagen y un iframe con un resultado de iframe receptivo. Espero que esto responda tu pregunta.
Verifique este enlace, por ejemplo: http://jsfiddle.net/Masau/7WRHM/
HTML:
<div class="wrapper">
<div class="h_iframe">
<!-- a transparent image is preferable -->
<img class="ratio" src="http://placehold.it/16x9"/>
<iframe src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
</div>
<p>Please scale the "result" window to notice the effect.</p>
</div>
CSS:
html,body {height:100%;}
.wrapper {width:80%;height:100%;margin:0 auto;background:#CCC}
.h_iframe {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
nota: Esto solo funciona con una relación de aspecto fija.
Me gusta esta solución mejor. Simple, escalable, receptivo. La idea aquí es crear un div externo de altura cero con relleno de fondo ajustado a la relación de aspecto del video. El iframe se escala al 100% en ancho y alto, llenando por completo el contenedor externo. El contenedor externo ajusta automáticamente su altura de acuerdo con su ancho, y el marco flotante se ajusta en consecuencia.
<div style="position:relative; width:100%; height:0px; padding-bottom:56.25%;">
<iframe style="position:absolute; left:0; top:0; width:100%; height:100%"
src="http://www.youtube.com/embed/RksyMaJiD8Y">
</iframe>
</div>
La única variable aquí es el valor de relleno en el div externo. Es un 75% para videos de relación de aspecto 4: 3 y un 56.25% para videos de formato panorámico 16: 9.
Podría usar unidades de vista aquí en lugar de%. Me gusta esto:
iframe {
max-width: 100vw;
max-height: 56.25vw; /* height/width ratio = 315/560 = .5625 */
}
DEMO (Cambiar el tamaño para ver el efecto)
body {
margin: 0;
}
.a {
max-width: 560px;
background: grey;
}
img {
width: 100%;
height: auto
}
iframe {
max-width: 100vw;
max-height: 56.25vw;
/* 315/560 = .5625 */
}
<div class="a">
<img src="http://lorempixel.com/560/315/" width="560" height="315" />
</div>
<div class="a">
<iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe>
</div>