web-dev-qa-db-ja.com

最大幅と高さのレスポンシブiframe

画像とiframeの両方を含む固定高のコンテナがあります。画像の反応を良くし、垂直と水平の両方のオーバーフローを防ぐには、次のCSSを設定するだけです。

img {
    max-width: 100%;
    max-height: 100%;
}

これにより、ポートレート画像が垂直方向にオーバーフローせず、ランドスケープ画像が水平方向にオーバーフローしないことが保証されます。

Iframeの場合、 "padding-ratio" technique を使用して、ラッパー要素のパディングをiframeのアスペクト比に設定しています（たとえば、16：9ビデオの場合は56.25％）：

.iframe-wrapper {
    position: relative;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
}

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

これは、iframeがビューポートの幅に合わせて拡大縮小することを意味しますが、ビューポートの高さを変更した場合、iframeは同じように機能しません。基本的に、iframeで画像の動作を模倣したいと思います。

cssiframeresponsive-design
16
Ben Foster

私の用途（レスポンシブサイトにVimeoからのビデオを埋め込む）では、これは私がテストしたブラウザーでうまく機能します：

@media screen and (max-width: 750px) {
    iframe {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }
}

画像のプレースホルダーを必要としないため、はるかに簡単です。

11
Caitlin M

このコードは私のためにトリックをしました：

<div class="video-container"><iframe.......></iframe></div>

.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

ソース： https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

6
Erik Hopkins

ここにあなたのために働くかもしれないと思う修正がありますが、それは必要ではないので、「パディング率」技術のために妥協する必要があります;）

次のようなHTML：

<div class="embeded-video">
      <img class="ratio-img" src="http://placehold.it/16x9" alt="16:9 Image" />
      <iframe src="//www.youtube.com/embed/I_dN9IpmOZU" frameborder="0" allowfullscreen align="center"></iframe>
    </div>

次のようなCSS：

.embeded-video {
    position: relative
}

.embeded-video .ratio-img {
    display: block;
    width: 100% !important;
    height: auto !important;
}

.embeded-video IFRAME {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

デモ： http://codepen.io/anon/pen/MYbqgp?editors=11

3
Syed

高さを最大の高さまでしか成長させることができるかどうかはわかりませんが、高さを制限してアスペクト比を維持することは可能です。これを機能させる巧妙な手法を次に示します...私はこのコードを書いていませんでしたが、私はそれを使用しましたが、非常にうまく機能しているようです：

https://codepen.io/shshaw/pen/uzlfh

後世のために（わずかに変更された）コードをここにコピーして貼り付けます...（私の主な変更は、パーセンテージではなくvh単位を使用しています。）

/* Adapted from https://codepen.io/shshaw/pen/uzlfh - thanks Shaw! */

.responsive-embed {
  height: 45vh; /* Set height here */
  display: inline-block; /* Must be inline-block */
  position: relative; /* Keep the child element contained */
  
  /* min/max-width will break the aspect ratio, but otherwise work as expected */
  /*
  min-height: 200px;
  max-height: 400px;
  */
}

.responsive-embed .ratio {
  height: 100%; /* Our ratio canvas is expanded to as tall as the height set above. */
  width: auto; /* Allows the width to adjust based in the height, keeping the aspect ratio */
  visibility: hidden; /* Prevents non-transparent image or alt text from showing up */
  text-align: left;
}

.responsive-embed iframe {
  /* Force the child block to be same size as parent */
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
<div class="responsive-embed">
  <img class="ratio" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAAAAAAeQfPuAAAAC0lEQVQYGWMYrAAAAJkAAWzZLOIAAAAASUVORK5CIIA=" alt="16x9">
  <iframe src="https://player.vimeo.com/video/20732587/?api=0&amp;portrait=0&amp;autoplay=0&amp;color=21abb9" width="100%" height="100%" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
0
Matt Browne

ここの誰かが Ikit を使用（または検討）している場合に備えて、uk-responsive属性を追加するだけでこれを修正できます。

   <iframe uk-responsive src="...">

とても簡単です。

0
Seth