うまく機能する純粋なCSSソリューションを実装しました。
これは、YouTube で生成された iframe コードを使用した私の見解のコードの例です。
<div class="video-container">
<iframe width="300" height="168" src="http://www.youtube.com/embed/MY__5O1i2a0" frameborder="0" allowfullscreen></iframe>
</div>
これは、iframe を使用する代わりに、AutoHtml gem から生成された body フィールドを使用した別のビューのコードの例です。これは、さまざまな種類のビデオ リンクを Web ページに埋め込むために使用されます。これは、リンクを同じ Web ページに動的に埋め込む必要があるモデルがある場合に適しています。
<div class="video-container">
<span style="text-align: center;"><%= @livevideo.body_html %></span>
</div>
CSSコードは次のとおりです。
.video-container {
position: relative; /* keeps the aspect ratio */
padding-bottom: 56.25%; /* fine tunes the video positioning */
padding-top: 60px; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
これは、コードがどのように機能するかを詳細に説明する YouTube ビデオで、1 つまたは 2 つのブログ投稿を参照してください。
http://www.youtube.com/watch?v=PL_R3zEjqEc