iframeをレスポンシブにする

144

私は読んでいたこのstackoverflowの記事「？あなたはインラインフレームを応答することはできます」というタイトルを、そしてコメント/答えの一つが私を導いた、このjfiddle。

しかし、自分のニーズに合うようにHTMLとCSSを実装しようとしたとき、同じ結果/成功がありませんでした。私は自分のJSフィドルを作成しました。私が使用しているiFrameのタイプと何らかの関係があると確信しています（たとえば、製品の画像も応答性が必要な場合など）。

私の主な懸念は、ブログの読者がiPhoneで私のブログにアクセスするときに、すべてをx幅（すべてのコンテンツに対して100％）にしたくないので、iFrameが正しく動作せず、唯一の要素が広くなる（したがって、スティックする）ことです。他のすべてのコンテンツを超えて-それが理にかなっている場合??）

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

MY 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%;
}
css  iframe  responsive-design 
— ブライトン
ソース
6
iframe自体（「ボックス」）は応答可能です。ただし、iframe内のすべてが個別のページであるため、CSSやJSのドメインにはありません。
— DA。
easyXDMを使用して、i-frameが埋め込まれているページと、iframeが指しているサーバー上のドキュメントとの間の通信を行うことができます。
— ジョンスミス
1
私は純粋なcssを好みます：stackoverflow.com/a/26194041/274502
— cregox 2014年

回答:

107

私はあなたに信じられないほどの歌う猫の解決策を提示します=）

.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%;
}
— オマール
ソース
4
：この技術をより詳細に説明するこの記事SEEALSO smashingmagazine.com/2014/02/...
— トーマスTempelmann
YouTube iframeでのみ機能します。これを参照してください：jsfiddle.net/1bd8qw76
— csandreas1
2
このテクニックはすべてのiframeで機能しますが、コツは、iframeのコンテンツもレスポンシブである必要があるということです。詳細は
— Ben Marshall
46

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%;
}
— アビ
ソース
2
content padding-bottomがコンテンツの幅の比率である場合、800x600は％75、800x536は％67である場合の私への今後の注意
— nerkn
1
これは、Sarafiとすべてのデバイスでiframeをスクロールさせるための良い出発点です。とても悲しいけど...
— クレウィス
これは、5000pxを超える長さであったため、iframeをスクロールできるようにするために必要なものです。他のコードは、長いiFrameを以下のコンテンツにオーバーレイすることを強制しました。
— ペンマ2017
16：9の場合、パディングボトムは56.25％である必要があります
— Sergey Sklyar 2017年
17

このサイト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フィドルです。

— プラグネシュチャウダリ
ソース
10

この解決策をチェックしてください...私のために動作します>> 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>
— レオ・レ​​オンシオ
ソース
あちこちにいくつかの間違った部分があったので、私はあなたのフィドルを更新しました。それは同じで、同じように機能しますが、ビットを混乱させることはありません。jsfiddle.net/6NSX3/263
— Techno.Shaman
iOSでは高さが正しく計算されません。ナビゲーションバーが考慮されます。また、IOSのiframeはスクロールできません。
— Tine Koloini 2016年
6

DAは正しいです。あなた自身のフィドルでは、iframeは確かに応答します。Firebugでiframeボックスのサイズを確認することで、これを確認できます。ただし、そのiframe内の一部の要素は応答しません。そのため、ウィンドウサイズが小さい場合、それらの要素は「はみ出し」ます。たとえば、div#products-post-wrapperの幅は8800pxです。

— Philip007
ソース
5

iFrameは、組み込み比率テクニックと呼ばれる小さな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

iframeは応答できません。独自の高さと幅を設定したWebページであるため、iframeコンテナーを応答可能にできますが、表示しているコンテンツはできません。

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

— MGDTech
ソース
これは誤解を招くものです。サンプルのフィドルリンクは、youtube iframeの幅と高さが指定されている場合にも機能します。
— Philip007 2013
14
私はこれが非常に厳しい反対投票であることに失望しています。彼が伝えているメッセージは重要です。ソースの応答性の気まぐれにいるので、iFrameが応答するのは危険です。はい、YouTubeは例外です。しかし、彼の主張はまだ有効です。
— MattWithoos 2015年
3

CSSを使用した単純な例：

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

注意してください：ただし、その中のコンテンツは応答しません！

2番目の編集：：内部コンテンツに応じて、レスポンシブiframeには2つのタイプがあります。

IFRAMEの内部にのみ含まれている場合であるものビデオまたは画像または多くの CSSコードの二列上ほぼ完全に十分であり、そしてそのために垂直に配置さ、アスペクト比が意味を持つと ...

もう1つは次のとおりです。

連絡先/登録フォームのコンテンツの種類。アスペクト比を維持する必要はありませんが、スクロールバーが表示されないようにし、コンテンツがコンテナの下を流れないようにします。モバイルではスクロールバーは表示されず、（iframeの）コンテンツが表示されるまでスクロールするだけです。もちろんheight、コンテンツの高さを狭い画面で発生する垂直方向のスペースに合わせるために、少なくとも何らかのを指定します。たとえば、次のようなメディアクエリを使用します。

@media (max-width: 640px){
iframe{
height: 1200px /*whatever you need, to make the scrollbar hide on testing, and the content of the iframe reveal (on mobile/phone or other target devices) */
}
}
@media (max-width: 420px){
iframe{
height: 1600px /*and so on until and as needed */
}
}
— サンドル・ズボリー
ソース
1
これはシンプルで素晴らしい
— vaishali kapadia 2018
iframeのサイズが変更されても、縦横比は維持されません。つまり、幅が何であっても高さは変わりません。
— ライアン、
@ryan回答を更新しました。ところで、私はあなたに部分的に同意します。
— シャーンドルZuboly
2

leowebdevの投稿が私の目的で機能しているように見えましたが、私が作成しようとしているサイトの2つの要素、つまりスクロールとフッターを削除しました。

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

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

— クリス・カナベンシュエ
ソース
2

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

iframe{  max-width: 100%;}
— ジェスティン
ソース
1
しかし、それは内部のコンテンツをレスポンシブにしませんでした。
— Vir
1 
<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

iframe, object, embed {
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
}
— サラン
ソース
1
入門

ブラウザのセキュリティ上の制約により、JavaScriptファイルを「親」ページと、iframe（「子」）を介して埋め込まれているページの両方に含める必要があります。

現在のバージョンでは、親ページにjQueryの最新バージョンを含める必要があります。子ページ機能はjQueryに依存しません。将来のバージョンでは、親のjQueryへの依存も削除する予定です。

注：makeResponsive（）関数呼び出しの「xdomain」パラメーターはオプションです。

コードサンプル <!-- Activate responsiveness in the "child" page --><script src="/js/jquery.responsiveiframe.js"></script><script> var ri = responsiveIframe(); ri.allowResponsiveEmbedding();</script> <!-- Corresponding code in the "parent" page --><script src="/js/jquery.js"></script><script src="/js/jquery.responsiveiframe.js"></script><script> ;(function($){ $(function(){ $('#myIframeID').responsiveIframe({ xdomain: '*'}); }); })(jQuery);</script>
— アーメド・エルシェイク
ソース
0

次のマークアップで：

<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

私はこのトピックについてもっと検索していて、ようやく良い答えを得ました。あなたはこのように試すことができます：

.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

「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クエリを使用するこのコードを適用します。

— みぞゲーム
ソース
こんにちは、iframe htmlコードは次のように単純です：
— Mizo Games
<div class = "iframe"> <iframe src = ""> </ iframe> </ div>
— Mizo Games
実際、私は自分のWebサイト（Al3abMizo Games）で使用しています。画面サイズに関係なく、任意のデバイスで任意のゲームをプレイして試すことができます。
— Mizo Games
0

アスペクト比が不明で、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万回呼び出されないように、タイムアウトも作成しました。

— JPeG
ソース
0 
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%;
}
— KTrivedi
ソース
0

この完全なコードをチェックしてください。次のコードのようなパーセンテージでコンテナを使用できます。

<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>

このデモページをご覧ください。

— M.ラック
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.