web-dev-qa-db-fra.com

Mettre à l'échelle et repositionner iframe comme la taille de l'arrière-plan: couverture

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>

Comme j'obtiens une même erreur d'origine des cookies dans le résultat des extraits, voici un miroir:

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

[edit] Peut-être que this est une meilleure démo, si vous comparez à this , il n'y a pas beaucoup de différence ... pourquoi? [/Éditer]

J'essaie de reproduire une couverture de taille d'arrière-plan pour un iframe.

Le fait est que cela semble redimensionner la vidéo, uniquement pour les plus grandes tailles,

Question,

Les mises à l'échelle peuvent-elles prendre effet à chaque point d'arrêt? ou le joueur vimeo pourrait être redimensionné par ses propres moyens de toute façon?

cssiframeresponsive-designabsolutecover
35
Toni Michel Caubet

Semblable à la réponse d'Alvaro Menendez, le crédit doit aller à cette réponse stackoverflow.com/a/29997746/3400962 par Qwertman. J'en suis arrivé à utiliser l'astuce "pourcentage de remplissage", mais l'utilisation intelligente de cette réponse des unités de fenêtre est cruciale pour ce travail.

La clé de la mise en œuvre de ce comportement consiste à garantir deux choses:

  1. Que le iframe conserve toujours le même rapport d'aspect que son contenu vidéo 16: 9. Cela garantira qu'aucun "padding" noir n'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 de la fenêtre

Une façon de conserver le rapport hauteur/largeur d'un élément consiste à utiliser l'astuce "pourcentage de remplissage" qui tire parti du fait que top et bottompadding utilise le width de l'élément comme base de 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 rapport de 16: 9, cela se traduit par 9/(16/100) = 56,25.

Le seul problème est que dans votre cas, le calcul est requis pour l'axe horizontal et vertical (car nous ne savons pas quelles dimensions la fenêtre sera) et cette astuce ne fonctionnera pas avec left et rightpadding pour obtenir le rapport hauteur/largeur 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/ (L'extrait n'affiche pas de vidéo, voir violon)

Heureusement, dans votre cas, vous souhaitez que la vidéo s'adapte à l'ensemble de l'écran afin que les unités de la fenêtre puissent être utilisées pour calculer le rapport d'aspect au lieu des pourcentages. Cela permet de calculer le width par rapport au height et vice 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 garantir que les height et width ne sont jamais plus petits que ceux de .container
  • height: 56.25vw; Définira le height par rapport au width de la fenêtre. Ceci est calculé en faisant 9/(16/100) = 56,25
  • width: 177.77777778vh; Définira le width par rapport au height de la fenêtre. Ceci est calculé en faisant 16/(9/100) = 177,77777778

Parce que height et width ne peuvent jamais être inférieurs à 100% Mais que le format doit rester dans le bon rapport, la vidéo couvrira toujours la totalité de la fenêtre d'affichage.

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/ (L'extrait n'affiche pas de vidéo, voir violon)

Les unités Viewport sont largement prises en charge , donc tant que vous ne ciblez pas les anciens navigateurs, cette méthode devrait fonctionner.

37
Hidden Hobbes

D'accord. Le mérite n'est PAS le mien car j'ai obtenu le jquery ici

Je me suis souvenu de cette question en l'utilisant sur l'un de mes anciens projets et je voulais vérifier si cela fonctionnerait de la même manière avec un iframe. Cela fait.

essentiellement avec ce css:

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

et ce 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);
};

Vous obtenez ceci: JSFIDDLE

(Je sais que vous cherchiez une solution CSS pure, ce que je ne pense pas que ce soit possible mais je peux me tromper, mais j'ai posté cette réponse car elle pourrait aider d'autres personnes ayant le même problème)

7
Alvaro Menéndez