web-dev-qa-db-ja.com

iframeを背景サイズのように拡大縮小して再配置：カバー

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>

スニペット結果に同じOriginエラーが表示されるため、ミラーを次に示します。

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

[編集]多分 this はより良いデモです。 this one と比較すると、それほど違いはありません...なぜですか？ [/編集]

Iframeの背景サイズのカバーを再現しようとしています。

大事なのは、ビデオのサイズを変更することだけです。

質問、

再スケールはすべてのブレークポイントで有効にできますか？とにかく、vimeoプレーヤーはそれ自体で再スケーリングする可能性がありますか？

cssiframeresponsive-designabsolutecover
35
Toni Michel Caubet

Alvaro Menendezの回答と同様に、クレジットはQwertmanによるこの回答stackoverflow.com/a/29997746/3400962にアクセスする必要があります。私は「パディング率」のトリックを使用する限り取得しましたが、この答えのビューポートユニットの巧妙な使用は、この作業に不可欠です。

この動作を実装する鍵は、次の2つのことを確認することです。

  1. iframeは常にビデオコンテンツ16：9と同じアスペクト比を維持します。これにより、ビデオの外側に黒い「パディング」が存在しないことが保証されます。
  2. iframeが常にビューポートのサイズに応じてheightまたはwidthを埋めること

要素のアスペクト比を維持する1つの方法は、 "padding percentage"トリック を使用することです。これは、topおよびbottompaddingは、要素のwidthを値の基礎として使用します。式B /（A/100）= C％を使用して、パディングに必要な割合を計算できます。ビデオの比率が16：9であるとすると、これは9 /（16/100）= 56.25に変換されます。

唯一の問題は、あなたの場合、水平軸と垂直軸の両方で計算が必要であるということです（ビューポートの寸法がわからないため）。このトリックはleftとrightpaddingは、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/ （スニペットはビデオを表示しません。フィドルをご覧ください）

幸いなことに、あなたの場合は、ビデオを画面全体に収めて、ビューポートの単位を使用してパーセンテージではなくアスペクト比を計算できるようにします。これにより、widthとの関係でheightを計算できます。

  • _left: 50%;_、top: 50%;_、およびtransform: translate(-50%, -50%);は、iframeを_.container_の中央に配置するために必要です
  • _min-height: 100%;_および_min-width: 100%;_は、heightおよびwidthが_.container_のサイズよりも小さくならないようにするために必要です。
  • _height: 56.25vw;_は、ビューポートのheightに関連してwidthを設定します。これは、9 /（16/100）= 56.25を実行して計算されます
  • _width: 177.77777778vh;_は、ビューポートのwidthに関連してheightを設定します。これは、16 /（9/100）= 177.77777778を実行して計算されます

heightとwidthが_100%_を下回ることはありませんが、正しいアスペクト比を維持する必要があるため、ビデオは常にビューポート全体をカバーします。

_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/ （スニペットはビデオを表示しません。フィドルをご覧ください）

ビューポートユニットは広くサポートされています です。したがって、古いブラウザをターゲットにしていない限り、このメソッドは機能します。

37
Hidden Hobbes

OK。 jqueryを取得したので、メリットは私のものではありません here

古いプロジェクトの1つで使用したとき、その質問を思い出し、iframeでも同じように機能するかどうかを確認したいと思いました。します。

基本的にこのCSSで：

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

そして、この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);
};

これを取得します：[〜＃〜] jsfiddle [〜＃〜]

（あなたが純粋なCSSソリューションを探していたことは知っていますが、それは可能だとは思いませんが、間違っている可能性がありますが、同じ問題を持つ他の人を助けることができるので、この答えを投稿しました）

7
Alvaro Menéndez