javascript - div - centrar contenido iframe html
Iframe centrado horizontal y verticalmente con una relación de aspecto de 16: 9 que utiliza la mayor cantidad posible de pantalla sin recortar en ningún lado (8)
¿Por qué no utilizas el método de cálculo para obtener el ancho de relación de aspecto que deseas?
HTML
<div class="container">
<iframe src="" frameborder="0"></iframe>
</div>
SCSS
<style>
$width = 80vw;
.container {
width: $width;
height: calc(($width/16) * 9);
position: relative;
}
iframe {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
-webkit-transform: translate(+50%, -50%);
transform: translate(+50%, -50%);
}
</style>
a continuación, puede cambiar el ancho de la misma en cualquier lugar y aplicar el posicionamiento que desee en el contenedor div y el iframe con el siguiente juego
Requisitos :
- El HTML: el iframe TIENE que estar dentro de un div que contiene. Vea el código abajo.
- CSS: el contenedor debe poder tener CUALQUIER
widthyheightválidos usando las unidades de ventanavwyvh. Se codifica abajo. - Sí, el
widthy laheightHASque estar envwyvh. - La imagen de vista previa de video estática NUNCA debe recortarse.
- La imagen de vista previa de video estática NO debe tener barras negras arriba ni abajo (letterboxing).
- La imagen de previsualización de video estática NO debe tener ninguna barra negra a la izquierda ni a la derecha (pillarboxing).
- La imagen de vista previa de video estática debe usar la mayor cantidad de espacio posible dentro del div que lo contiene.
- La imagen de vista previa de video estática SIEMPRE debe mantener su relación de aspecto de 16: 9.
- Las barras de desplazamiento NUNCA deberían aparecer.
- La imagen de vista previa de video estática debe estar centrada verticalmente así como horizontalmente dentro del div que la contiene.
- Diseño web adaptable.
Al cambiar el tamaño del navegador o la ventana gráfica, se deben cumplir todos los requisitos anteriores.
HTML :
<div class="container">
<iframe></iframe>
</div>
CSS :
.container {
width:90vw;
height:50vh;
}
Creo que la pantalla de la celda de tabla podría resolver esto. Simplemente aplíquelo en el contenedor para que el iframe sea el contenido
De acuerdo con las especificaciones, el navegador insertará elementos ficticios donde necesite procesar la celda de forma correcta y completamente centrada y para contener su contenido y, si es necesario, crecer con él.
Los requisitos: creo que algunos de ellos están más allá del alcance de su pregunta, también dependerán de lo que está cargado en el iframe, fuera de control de este documento de contenedor. Mi código sugerido es simple, pero creo que cumple con todos los requisitos posibles para el padre del iframe y sigue siendo amigable con los navegadores cruzados.
Las barras negras prohibidas y la relación de aspecto obligatoria aún podrían ser defectuosas en el documento cargado. Si no puede controlar lo que está cargado, la última opción podría ser los atributos "srcdoc" y "sin costura", pero eso excluiría, por ejemplo, todas las versiones de IE.
JsFiddle con algunos comentarios totalmente innecesarios. Espero que la edición a continuación resuelva el caso.
De todos modos, ¡me divertí! ¡Gracias! :)
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Fully Container Centred Iframe</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
.container {
display:table-cell;
padding:;
width:100vw;
height:20vh;
background:tan;
vertical-align:middle;
text-align:center;
}
.container .ratio{
display:inline-block;
position:relative;
padding-bottom:56%;
width:100%;
height:0;
overflow:hidden;
vertical-align:middle;
}
.container iframe {
position:absolute;
top:-1%;
left:-1%;
border:0;
width:102%;
height:102%;
overflow:hidden;
vertical-align:middle;
}
</style>
</head><body>
<div class="container">
<div class="ratio">
<iframe scrolling="no" src=""></iframe>
</div>
</div>
</body></html>
La misma solución, pero sin margen adicional para mantener la proporción.
JsFiddle con los mismos comentarios totalmente no necesarios.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Fully Container Centred Iframe</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
.container {
display:table-cell; /* (specs: omitted table parts, the browser will insert mandatory elements in the dom tree) */
position:relative;
padding:; /* optional, margins ignored */
width:100vw; /* any value */
height:1vh; /* will expand by the :before element */
overflow:hidden; /* hide eventual black bars */
background:tan; /* bg-colors just for demo testing */
vertical-align:middle;
text-align:center;
}
.container:before {
display:block;
padding-top:56%; /* keeps the 16/9 ratio for the AP */
height:0;
background:red;
content:"/a0";
}
.container iframe {
position:absolute; /* to be ratio consistent */
top:-.5%;
left:-.5%; /* overflow eventual black bars */
border:0;
width:101%; /* grow some to avoid thinner black bars */
height:101%;
overflow:hidden; /* for html5 browsers the html attribute is depreciated */
background:gold;
}
</style>
</head><body>
<div class="container">
<iframe scrolling="no" src=""></iframe>
</div>
</body></html>
Recomendaría usar un oyente window.resize de JavaScript para resolver este tipo de problema. No puedo escribir el código hoy porque tengo un calendario bastante apretado, pero intentaré escribir un algo:
- En el redimensionamiento de la ventana, calcule el ancho de la ventana (wW) y la altura de la ventana (wH);
- Determine el ancho del contenedor (cW) según wW (por ejemplo, cW = wW-10 para obtener casi todo el ancho disponible; puede omitir el -10 si lo desea);
- Determine la altura del contenedor (cH) según cW calculado anteriormente: cH = cW * 9/16;
- Ahora, si cH> wH (es decir, el contenedor no encaja verticalmente en la pantalla porque es demasiado ancho), deberíamos revisar cW según la altura de ventana disponible. En este caso, cH = wH-10 (para obtener casi todo el espacio vertical disponible, nuevamente, puede omitir -10 si lo desea) y luego cW = wH * 16/9 ;
- Debería tener ahora cW y cH válidos para que su contenedor encaje en la ventana sin salirse de la pantalla y puede aplicarlo al contenedor.
- Para centrar el contenedor en la pantalla, usa la posición: absoluta, izquierda: 50%; arriba: 50%; en tu CSS Cuando actualice cW y cH, también actualice margin-left: - (cW / 2); margin-top: - (cH / 2);
Este es el concepto: puedes improvisar según tus necesidades. Espero que ayude.
Usando JavaScript, puede escuchar el evento de cambio de resize , que se dispara cada vez que la ventana del navegador cambia de forma. Luego, con un poco de álgebra simple, puede calcular las dimensiones del iframe en función de las dimensiones del contenedor. Aquí hay una demostración que muestra todos los requisitos.
"use strict";
var container = document.querySelector(''.container'');
var frame = container.querySelector(''iframe'');
function resizeVideo() {
frame.width = frame.height = 0;
var width = container.offsetWidth;
var height = container.offsetHeight;
if (height * (16 / 9) <= width) {
frame.height = height;
frame.width = height * (16 / 9);
} else {
frame.width = width;
frame.height = width * (9 / 16);
}
}
window.addEventListener(''load'', resizeVideo);
window.addEventListener(''resize'', resizeVideo);
.container {
width: 90vw;
height: 50vh;
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div class="container">
<iframe src="https://www.youtube.com/embed/BKhZvubRYy8" frameborder="0" allowfullscreen></iframe>
</div>
si quieres un uso sensible
.container, iframe {
width:100%;
height:auto;
}
.container el resultado que .container ; sin embargo, tuve que agregar un div adicional como padre de la clase .container . Este JSFiddle debería funcionar para los usuarios en Chrome ( versión de escritorio de Windows ), sin embargo, cuando traté de usar el mismo violín en Edge e IE11 encontré que crearía el efecto de buzón no deseado debido a que la cubierta de la imagen se alejaba demasiado.
HTML
<div id="wrapper">
<div class="container">
<iframe scrolling="no" src="https://www.youtube.com/embed/YL9RetC0ook" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
CSS
body {
margin: 0;
}
#wrapper {
width: 90vw;
height: 50vh;
}
.container,iframe {
width: 100%;
height: 100%;
}
No estoy seguro de si esto funciona para Firefox, así que quizás si tienes Firefox puedes probarlo en mi JSFiddle . Sin embargo, para Chrome ( al menos ) esta debería ser la solución que buscaba según lo establecido por los requisitos que enumeró.
.container {
width:90vw;
height:50vh;
}
.container iframe {
width: 100%;
height: 100%;
}
Parece funcionar bastante bien en este violín https://jsfiddle.net/1q10L7hj/