web-dev-qa-db-ja.com

Twitter BootstrapでレスポンシブYoutube埋め込みiframeを実装する方法は？

現在、Twitter Bootstrapベースのサイトに次のHAMLコードを含むYoutubeビデオを埋め込みます。

.row
  .span12
    %iframe.span11{ :height => "720", :frameborder => "0", :allowfullscreen => nil, :src => v.video_url }

残念ながら、ブラウザのサイズを変更するとき、またはモバイルデバイスで静的な高さのため、これはうまく応答しません。

この埋め込みiframeをYoutubeに実装するためのより良い（より動的で応答性の高い）方法は何でしょうか？

ruby-on-rails-3twitter-bootstrapyoutube-apiresponsive-design
29
pglombardo

この「レスポンシブビデオCSS」を試してみてください。完璧に機能します。 https://Gist.github.com/2302238

<section class="row">
  <div class="span6">
    <div class="flex-video widescreen"><iframe src="https://www.youtube-nocookie.com/embed/..." frameborder="0" allowfullscreen=""></iframe></div>
  </div>
  <div class="span6">
    ...
  </div>
</section>
78
Bart Naus

うまく機能する純粋な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%; }

ここにコードがどのように機能するかを詳細に説明し、チェックアウトするために1つか2つのブログ投稿を与えるYouTubeビデオがあります。

http://www.youtube.com/watch?v=PL_R3zEjqEc

11
Pamela Cook - LightBe Corp

Bootstrap 3.2.0には、いくつかの改善と多数のバグ修正が含まれています。レスポンシブデザインのウェブサイトを構築するためのフレームワークBootstrapは、この最新バージョンで追加されたレスポンシブおよび要素の機能のサポートがありませんでした。

表示されるページの幅に基づいてサイズを調整するレスポンシブYouTube 16：9ビデオのHTMLは、次のようになります。

コンテナ（多分DIV）にclass = "embed-responsive embed-responsive-16by9" 
 
を追加します
3
Iso Samuel

これはおそらくjQueryで行うのが最適です： http://www.seanmccambridge.com/tubular/ または http://okfoc.us/okvideo/

1
neon

自動化 @ Bartの答え のために、<div class="flex-video">内のiframe要素を自動的にラップする簡単なJavascriptを作成しました。

$(document).ready(function() {
  $('iframe').each(function() {
    $(this).wrap('<div class="flex-video"></div>');
  });
});
1
Caumons

ブートストラップを使用する場合、以下の方法がレスポンシブ埋め込みを実装する最も簡単な方法であることは間違いありません。

<!-- 16:9 aspect ratio -->
 <div class="embed-responsive embed-responsive-16by9">
   <iframe class="embed-responsive-item" src="..."></iframe>
 </div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

ドキュメントはここにあります： http://getbootstrap.com/components/#responsive-embed 。

1
B Cronyn