レスポンシブデザインのためのiframeのスケーリングCSSのみ

Question

多くのサイトにはYoutubeビデオが埋め込まれています。 Youtubeは現在電話で動作します。レスポンシブルデザインが課題になるのなら、なぜYouTube動画を含むiframeのためのものではないでしょうか？

日時をオンにした後（私はHTML/CSSの新機能です）、問題を明確かつ簡単に解決できませんでした。 iframeの幅を拡大するのは簡単ですが、高さを相対的に保つためには、javascript、jQuery、phpのチャンクがWebデザインの初心者には非常に難解でした。私は、幅がどのように変化しても、特定のアスペクト比を常に維持するために、iframeの高さをスケーリングする簡単な方法が必要でした。

未解決の質問ではないように、この方法は以下のとおりです。 iframeの初期設定は次のとおりです。

<iframe src="//www.youtube.com/embed/example_url" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 

これだけです。

誰か他の解決策もありましたか？

Answer 1

ソリューションはネストされたdivです。ちょっとしたハッキーだと思いますが、それは解決策が多すぎる問題の本当に簡単な解決策です。この例では、Youtubeビデオのアスペクト比は16：9です。あなたのHTMLは次のようになります。

<div id="outer"> 
    <div id="inner"> 
     <iframe src="//www.youtube.com/embed/example_url" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
    </div> 
</div> 

そして、あなたのスタイルシート：

#outer{ 
max-width: 640px; 
max-height: 360px; 
width: 100%; 
height: 100%; 
} 

#inner{ 
    height: 0px; 
    padding-bottom: 56.25%; 
} 

#inner iframe{ 
    width: 100%; 
    height: 100%; 
} 

外側のdivは、最大の高さと幅を設定し、スケールに自分自身を可能にし、内側のdivを一致させるためにパディング属性を使用しながら、そのdivの高さの高さ（私はかなり確信しています）。値は、高さと幅の比である(height*100/width)%に設定する必要があります。 iframeはdivを含む全体を埋めるように伸びます。空白がWeb上に埋め込まれるので、テキストを下に置くだけでよいはずです。

私はそれが見つかった場所を正確に覚えていません。それはスタックオーバーフローのどこか他のイメージで行われましたが、組み込みのYoutubeビデオは非常に一般的なので、iframeのために動作するように設定することは適切です。

Here's a JSfiddle with the working thing.