web-dev-qa-db-ja.com

CSSのみを使用したレスポンシブビデオiframe（アスペクト比を維持）

私は通常 this one と同様のソリューションを使用します。何かのようなもの：

.wrapper {
   position: relative;
   width: 100%;
   height: 0;
   padding-bottom: 33%;
}
.wrapper iframe {
   position:absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
}

しかし、今回はHTMLまたはJavaScriptコードにアクセスできないため、ラッパーを使用してheight:0。

CSSのみでiframeをレスポンシブにする（および比率を維持する）方法はありますか？

これを試しました（iframeで動作しますが、そのコンテンツでは動作しません）：

iframe {
    width: 100%;
    background: red;
    height: 0;
    padding-bottom: 33%;    
}

フィドル

何かご意見は？古いブラウザをサポートする必要がないので、CSS3ソリューションでさえも素晴らしいでしょう。

htmlcssiframeresponsive-design
36
Toni Michel Caubet

新しい CSSビューポート単位vwおよびvh（ビューポート幅/ビューポート高さ）を使用します

[〜＃〜] fiddle [〜＃〜]

iframe {
    width: 100vw; 
    height: 56.25vw; /* 100/56.25 = 560/315 = 1.778 */
    background:red;  
}

ブラウザのサポートも良好です：IE9 +（ caniuse ）

41
Danield

以下は、CSS2シークレットに基づいたソリューションのFiddleです。 https://jsfiddle.net/59f9uc5e/2/

<div class="aspect-ratio">
  <iframe src="" width="550" height="275" frameborder="0"></iframe>
</div>

<style>
/* This element defines the size the iframe will take.
   In this example we want to have a ratio of 25:14 */
.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56%; /* The height of the item will now be 56% of the width. */
}

/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
</style>

パディングのパーセント値の処理方法によって説明されます。

割合は、「padding-top」および「padding-bottom」の場合でも、生成されたボックスの包含ブロックの幅に関して計算されます。

https://www.w3.org/TR/CSS2/box.html#padding-properties

46
SimonSimCity

Calc関数を使用すると、読みやすくなります。

.iframe-video {
    width: 755px;
    height: 424px;
    max-width: 100%;
    max-height: calc((100vw - 40px) / (16/9));
}
  • widthおよびheightはデスクトップ用のサイズであり、古代のブラウザーへのフォールバックでもあります
  • 40pxはマージンです（両側のiframeボーダーとビューポートボーダーの間に20ピクセル）
  • 16/9はビデオの比率です（エッジツーエッジプレーヤーがある場合）
1
Bobík

これは一種のハッキングですが、ビデオのアスペクト比を維持するために画像を使用できます。たとえば、ペイントに行き、解像度1280 x 720の画像を保存して、16：9のアスペクト比に使用しました（ここでは、インターネットからどこかで空白の画像を取得します）。

これは、高さを自動のままにして画像の幅を変更すると、画像が自動的にスケーリングされ、比率が維持されるためです。

img {
  display: block;
  height: auto;
  width: 100%;
}
iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.wrapper {
  float: left;
  position: relative;
}
<div class="wrapper">
  <img src="http://www.solidbackgrounds.com/images/1280x720/1280x720-ghost-white-solid-color-background.jpg" alt=""/>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>
0
Fly1nP4nda