如何使用Twitter Bootstrap實現響應式Youtube嵌入式iframe？

在一個基於Twitter的引導網站上看到以下HAML代碼目前我嵌入YouTube視頻：如何使用Twitter Bootstrap實現響應式Youtube嵌入式iframe？

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

不幸的是，這不調整瀏覽器時或反應良好的，因爲靜態高度的移動設備。

什麼是一個更好（更動態和響應）的方式來實現這個嵌入式iframe的Youtube？

來源

2012-08-28 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>

來源

2012-09-02 11:35:24 Bart

感謝Bart！在響應式WP博客中像一個魅力一樣工作。 –

對於這個腳本沒有工作，但這個jQuery插件爲我做了這個工作：https://github.com/marclarr/FitVids.js –

男人，這工作得很好。我很想看到這種內置的默認引導。 – alexander7567

這可能是最好的使用jQuery做：http://www.seanmccambridge.com/tubular/或http://okfoc.us/okvideo/

來源

2012-08-28 21:01:48 neon

我實現了一個純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寶石，其用於嵌入不同類型的視頻鏈接到網頁所產生的主體字段另一個視圖的示例。如果您有一個模型需要動態地將鏈接嵌入到相同的網頁中，這很好。

<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視頻介紹的很詳細的代碼是如何工作的，並給一個或兩個博客文章退房。

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

來源

2013-05-25 21:02:41

雖然這可能在理論上回答這個問題，[這將是更可取的]（http://meta.stackexchange.com/q/8259）包括的基本部分答案在這裏，並提供參考鏈接。 – Matt

只是爲了使自動化@Bart's answer，我創建了一個簡單的Javascript剪斷自動包裝內<div class="flex-video">

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

來源

2013-12-14 16:03:12 Caumons

引導3.2.0 iframe元素配備了多次改進和大量的bug修復。一個構建具有響應式設計的網站的框架，Bootstrap缺少對這個最新版本中添加的響應式和元素功能的支持。

的響應YouTube的16 HTML：該調整基於它顯示在看起來像這樣的頁面寬度的大小9視頻：

 
On your container(maybe DIV) add class="embed-responsive embed-responsive-16by9"

來源

2014-09-11 15:18:27

如果使用引導程序，下面的方法是沒有懷疑實施響應嵌入的最簡單的方法：

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

來源

2016-08-03 11:54:45

如何使用Twitter Bootstrap實現響應式Youtube嵌入式iframe？

回答

相關問題