css - ejemplos - Escala y cambia la posición del iframe como fondo: tapa

iframe que es

Question

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.sized {
  height: 100%;
  position: relative;
  background: #eee;
  overflow:hidden;
  padding:0;
}
.sized iframe {
  position:absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
@media (min-width: 320px) {
  height: 200%;
  top: -50%;
}
@media (min-width: 640px) {
  height: 180%;
  top: -40%;
}

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

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

Como recibo un error de origen de cookies en el resultado de los fragmentos, aquí hay un espejo:

https://jsfiddle.net/07Lffw5x/2/embedded/result/

[edit] Tal vez this sea ​​una mejor demo, si se compara con esta , no hay mucha diferencia ... ¿por qué? [/editar]

Estoy intentando reproducir una portada de fondo para un iframe.

El problema es que parece reescalar el video, solo para tamaños más grandes,

Pregunta,

¿Pueden las escalas tener efecto en cada punto de quiebre? o el reproductor de vimeo podría cambiar la escala por su cuenta de todos modos?

Answer 1

De acuerdo. El mérito NO es mío ya que tengo el jquery here

Recordé esa pregunta porque la utilicé en uno de mis proyectos anteriores y quería comprobar si funcionaría igual con un iframe. Lo hace.

Básicamente con este CSS:

.container {
    position: absolute;
    top: 0;
    overflow: hidden;
}

y este jquery:

var min_w = 300; // minimum video width allowed
var vid_w_orig;  // original video dimensions
var vid_h_orig;

jQuery(function() { // runs after DOM has loaded

    vid_w_orig = parseInt(jQuery(''iframe'').attr(''width''));
    vid_h_orig = parseInt(jQuery(''iframe'').attr(''height''));

    jQuery(window).resize(function () { resizeToCover(); });
    jQuery(window).trigger(''resize'');
});

function resizeToCover() {

    // set the video viewport to the window size
    jQuery(''.container'').width(jQuery(window).width());
    jQuery(''.container'').height(jQuery(window).height());

    // use largest scale factor of horizontal/vertical
    var scale_h = jQuery(window).width() / vid_w_orig;
    var scale_v = jQuery(window).height() / vid_h_orig;
    var scale = scale_h > scale_v ? scale_h : scale_v;

    // don''t allow scaled width < minimum video width
    if (scale * vid_w_orig < min_w) {scale = min_w / vid_w_orig;};

    // now scale the video
    jQuery(''iframe'').width(scale * vid_w_orig);
    jQuery(''iframe'').height(scale * vid_h_orig);
    // and center it by scrolling the video viewport
    jQuery(''.container'').scrollLeft((jQuery(''iframe'').width() - jQuery(window).width()) / 2);
    jQuery(''.container'').scrollTop((jQuery(''iframe'').height() - jQuery(window).height()) / 2);
};

Usted obtiene esto: JSFIDDLE

(Sé que estabas buscando una solución de CSS pura, que no creo que sea posible, pero puedo estar equivocado, pero he publicado esta respuesta porque podría ayudar a otras personas con el mismo problema)

Answer 2

De forma similar a la respuesta de Alvaro Menéndez, el crédito debe ir a esta respuesta .com/a/29997746/3400962 por parte de Qwertman. Llegué al extremo de usar el truco del "porcentaje de relleno", pero el uso astuto de esta respuesta de las unidades de visualización es crucial para este funcionamiento.

La clave para implementar este comportamiento es garantizar dos cosas:

1. Que el iframe siempre mantenga la misma relación de aspecto que su contenido de video 16: 9. Esto asegurará que no haya "relleno" negro en la parte exterior del video
2. Que el iframe siempre llena el height o width dependiendo del tamaño de la ventana gráfica

Una forma de mantener la relación de aspecto de un elemento es usar el truco de "porcentaje de relleno" que aprovecha el hecho de que el padding top e bottom usa el width del elemento como base para su valor. Usando la fórmula B / (A / 100) = C%, podemos calcular el porcentaje requerido para el relleno. Dado que el video tiene una proporción de 16: 9, esto se traduce en 9 / (16/100) = 56.25.

El único problema es que en su caso el cálculo es necesario tanto para el eje horizontal como el vertical (ya que no sabemos qué dimensiones tendrá la ventana gráfica) y este truco no funcionará con right padding right e right para obtener la relación de aspecto en relación a la 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/ (El fragmento no muestra video, mira el violín)

Afortunadamente, en su caso, desea que el video se ajuste a toda la pantalla para que las unidades de visualización se puedan usar para calcular la relación de aspecto en lugar de porcentajes. Esto permite el uso para calcular el width en relación con la height y vica versa:

• left: 50%; , top: 50%; y transform: translate(-50%, -50%); son necesarios para centrar el iframe en .container
• min-height: 100%; y min-width: 100%; son necesarios para garantizar que la height y el width nunca sean menores que los de .container
• height: 56.25vw; establecerá la height en relación con el width de la ventana gráfica. Esto se calcula haciendo 9 / (16/100) = 56.25
• width: 177.77777778vh; establecerá el width en relación con la height de la ventana gráfica. Esto se calcula haciendo 16 / (9/100) = 177.77777778

Debido a que la height y el width nunca pueden estar por debajo del 100% pero deben permanecer en la proporción de aspecto correcta, el video siempre cubrirá toda la ventana gráfica.

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/ (El fragmento no muestra el video, vea el violín)

Las unidades de visualización son ampliamente compatibles , por lo que, siempre que no se oriente a navegadores antiguos, este método debería funcionar.