web-dev-qa-db-ja.com

Iframeをレスポンシブにする

私は このスタックオーバーフローの投稿 「iFrameをレスポンシブにしてくれませんか？」と題して読んでいましたが、コメント/回答の1つが私を このjfiddle に導きました。

しかし、自分のニーズに合わせてHTMLとCSSを実装しようとしたとき、同じ結果/成功は得られませんでした。私は 私自身のJSフィドル を作成したので、それがどのように機能しないのかを示すことができます。私が使用しているiFrameのタイプと何か関係があると確信しています（たとえば、製品の画像もレスポンシブである必要があるかどうかなど）。

私の主な関心事は、私のブログの読者が自分のiPhoneで私のブログを訪問するとき、私はすべてをx幅（私のすべてのコンテンツに対して100％）にしたくないということです。他のすべてのコンテンツを超えて - それが理にかなっている場合は??）

とにかく、なぜ動かないのか誰かが知っていますか？ありがとうございました。

これが私のJSFIDDLEのHTMLとCSSです（リンクをクリックしたくない場合）：

<div class="wrapper">
  <div class="h_iframe">
    <!-- a transparent image is preferable -->
    <img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" />
    <iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585'
      frameborder="0" allowfullscreen></iframe>
  </div>
</div>

そしてここに付随するCSSがあります：

.wrapper {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: #ffffff;
}

.h_iframe {
  position: relative;
}

.h_iframe .ratio {
  display: block;
  width: 100%;
  height: auto;
}

.h_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
cssiframeresponsive-design
128
Brighton

私はあなたにプレゼント 信じられないほどの歌う猫 solution =）

.wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

jsFiddle： http://jsfiddle.net/omarjuvera/8zkunqxy/2/
ウィンドウバーを動かすと、それに応じてサイズ変更するiframeが表示されます。

あるいは、固有比技法 - を使用することもできます（トマト、トマト）。

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
} 

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
84
Omar

応答性を高めるためにこのコードを使用してみてください

iframe, object, embed {
    max-width: 100%;
}
68
Connor Cushion Mulhall

私はDave Rupert/Chris Coyierからの解決策を見つけました。しかし、私はこれを思いついたので私はスクロールを利用可能にしたいと思った：

// _ html _ 

<div class="myIframe"> 
   <iframe> </iframe> 
</div>

// _ css _ 

.myIframe {
     position: relative;
     padding-bottom: 65.25%;
     padding-top: 30px;
     height: 0;
     overflow: auto; 
     -webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY 
     border: solid black 1px;
} 
.myIframe iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
43
Avi

あなたはこのサイトで述べられたこのトリックを使うことができます http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php 。

とても便利で分かりやすいです。作成する必要があるすべて

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

これがあなたの編集された jsフィドルです デモ用です。

16
Pragnesh Chaudhari
iframe{
  max-width: 100% !important;
}
10
Christian Michael

この解決策をチェックしてください...私にはうまくいきます>> https://jsfiddle.net/y49jpdns/ /

<html lang="en" class="no-js">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <style>
      html body {width: 100%;height: 100%;padding: 0px;margin: 0px;overflow: hidden;font-family: arial;font-size: 10px;color: #6e6e6e;background-color: #000;} #preview-frame {width: 100%;background-color: #fff;}</style>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script>
         var calcHeight = function() {
           $('#preview-frame').height($(window).height());
         }

         $(document).ready(function() {
           calcHeight();
         }); 

         $(window).resize(function() {
           calcHeight();
         }).load(function() {
           calcHeight();
         });
      </script>
   </head>
   <body>
      <iframe id="preview-frame" src="http://leowebguy.com/" name="preview-frame" frameborder="0" noresize="noresize">
      </iframe>
   </body>
</html>
9
Leo Leoncio

DAは正しいです。あなた自身のいじりでは、iframeは確かに敏感です。あなたは、iframeボックスサイズをチェックすることによって、firebugでそれを確認することができます。しかし、そのiframe内のいくつかの要素は反応しないので、ウィンドウサイズが小さいときそれらは「はみ出します」。たとえば、div#products-post-wrapperの幅は8800pxです。

6
Philip007

iFrameは、 Intrinsic Ratio Technique と呼ばれるちょっとしたCSSテクニックでアスペクト比を保ちながら、完全に反応することができます。私は特にこの質問に取り組むブログ記事を書きました： https://benmarshall.me/responsive-iframes/

この要旨は次のとおりです。

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

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

<div class="intrinsic-container intrinsic-container-16x9">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

ブーム、反応がいい！

3
Ben Marshall

Leowebdevの投稿は私の最後にはうまくいったようだが、それは私が作成しようとしているサイトの2つの要素、すなわちスクロールとフッターをノックアウトしたことに気づいた。

スクロールは、iframe埋め込みコードにscrolling="yes"を追加することで元に戻りました。

応答性のためにフッターが自動的にノックアウトされるかどうかはわかりませんが、他の人がその答えを知っていることを願います。

2
Chris Knabenshue

ピクセル単位で指定されたiframeの高さと幅を削除し、パーセンテージを使用する

iframe{  max-width: 100%;}
2
Jestin

シンプル、CSS付き：

iframe{
width: 100%;
max-width: 800px /*this can be anyting you wish, to show, as default size*/
}

ください、注意してください ：しかし、それはそれの中の内容を敏感にしません！

2
iorgu
<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

iframe, object, embed {
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
}
1
Saran

それは@ Connor Cushion Mulhallからのコードを調整することによって私を解決した

iframe, object, embed {
  width: 100%;
  display: block !important;
}
1
Savangchai Saroj

この解決策は私のために働いた。そして私はそれが簡単だとわかりました。 https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe/

0
Vishwas Gagrani

iframeは反応しません。 iframeコンテナをレスポンシブにすることはできますが、独自の高さと幅が設定されたWebページであるため、表示しているコンテンツは反応しません。

例のフィドルリンクは、サイズが宣言されていない埋め込みのYouTubeビデオリンクを表示しているため機能します。

0
MGDTech

「iframe」をレスポンシブにしてすべてのデバイス画面に合わせるための最善の解決策は、単にこのコードを適用することです（ゲームサイトではうまく機能します）。

iframe::-webkit-scrollbar{display:none}
.iframe{background:#fff;overflow:hidden}
.iframe iframe{width:100%;height:540px;border:0;display:block}
.iframe-content{position:absolute;width:100%;height:540px;overflow:auto;top:0;bottom:0;-webkit-overflow-scrolling:touch}

@media screen and (max-width:992px){.iframe iframe{height:720px}}
@media screen and (max-width:768px){.iframe iframe{height:720px}}
@media screen and (max-width:720px){.iframe iframe{height:720px}}
@media screen and (max-width:479px){.iframe iframe{height:480px}}
@media screen and (max-height:400px){.iframe iframe{height:360px}}

あなたがレスポンシブゲームコンテナを探しているなら、すべてのデバイスに適合するこのコードは高度なCSS @mediaクエリを使います。

0
Al3abMizo Games
For Example :

<div class="intrinsic-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

CSS 

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

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

私はこの話題についてもっと調べて、やっといい答えを得ます。 this ：のように試すことができます。

.wrapper {
width: 50%;
}
.container {
height: 0;
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.container iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
<div class="wrapper">
  <div class="container">
    <iframe src="there is path of your iframe"></iframe>
   </div>
</div>
0
user3951808

アスペクト比が不明で、iFrameのコンテンツが完全に応答する状況では、完全に応答するiFrame。

上記の解決策のどれも私の必要性のために働きませんでした、それはそれの中に完全に敏感な動的内容を持っている完全に敏感なiFrameを作成することでした。いかなる種類のアスペクト比を維持することも選択肢ではありませんでした。

  1. ナビゲーションバーとiFrameの上下のコンテンツの高さを取得します。私の場合は、一番上のナビゲーションバーを引くだけでよく、iFrameが画面の一番下までいっぱいになるようにしたいと思いました。

コード：

function getWindowHeight() {
        console.log('Get Window Height Called')
        var currentWindowHeight = $(window).height()

        var iFrame = document.getElementById("myframe")
        var frameHeight = currentWindowHeight - 95

        iFrame.height = frameHeight; 

    }
//Timeout to prevent function from repeatedly firing
    var doit;
    window.onresize = function(){
      clearTimeout(doit);
      doit = setTimeout(resizedw, 100);
    };

サイズ変更時に関数が100万回呼び出されないように、タイムアウトも作成しました。

0
JPeG

次のようにマークアップします。

<div class="video"><iframe src="https://www.youtube.com/embed/StTqXEQ2l-Y"></iframe></div>

次のCSSはビデオを全角で16：9にします。

.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}

.video > .video__iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
  }
}
0
Dorian

このフルコードをチェックしてください。あなたは以下のコードのようにパーセンテージでコンテナを使うことができます：

<html>
<head>
<title>How to make Iframe Responsive</title>
<style>
html,body        {height:100%;}
.wrapper         {width:80%;height:100%;margin:0 auto;background:#CCC}
.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
</style>
</head>
<body>
<div class="wrapper">
<div class="h_iframe">
<img class="ratio" src=""/>
<iframe src="http://www.sanwebcorner.com" frameborder="0" allowfullscreen></iframe>
</div>
<p>Please scale the "result" window to notice the effect.</p>
</div>
</body>
</html>

この デモページをチェックしてください。

0
M. Lak