一些HTML元素沒有發(fā)揮好與響應(yīng)布局。 其中之一是好醇’ iframe ，你可能需要嵌入外部來源，例如YouTube內(nèi)容時使用。
在這篇文章中，我們將向您展示如何使用CSS來使嵌入內(nèi)容響應(yīng)，使內(nèi)容，如視頻和日歷調(diào)整與瀏覽器的視口。 對于那些場合非編碼將會在您的濟(jì)南網(wǎng)站建設(shè)中嵌入視頻，你不想依靠他們增加額外的標(biāo)記， 我們也將研究使用而不是CSS JavaScript的一個解決方案 。
（你可以看到這些技術(shù)的演示在我的博客。）
該標(biāo)記嵌入內(nèi)容
服務(wù)，例如YouTube提供，您可以復(fù)制并粘貼到自己的網(wǎng)站中嵌入內(nèi)容的代碼。 我傾向于推薦給我的客戶，他們的主機(jī)與YouTube視頻，因為這將節(jié)省他們的服務(wù)器空間，無論用戶的瀏覽器或設(shè)備，YouTube將正確地顯示視頻。 兩個主要的方法來嵌入在網(wǎng)站的視頻是HTML5 video元素，它不會在Internet Explorer舊版本的工作，和Flash，這并不在iOS設(shè)備上工作，是不是符合標(biāo)準(zhǔn)的。
當(dāng)您嵌入來自外部源的內(nèi)容，該代碼將包括一個iframe ：
<iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
這個iframe ，均可以在您的網(wǎng)站上顯示外部內(nèi)容，因為它包含一個指向流媒體內(nèi)容的來源網(wǎng)址。
但是，你會發(fā)現(xiàn)，我們iframe包含width和height屬性。 除去這些，并在iframe會消失，因為它不會有尺寸。 而且你也不可以解決這個問題在你的樣式表，很遺憾。
的width屬性意味著，一個屏幕比560像素窄上， 嵌入的內(nèi)容將突出其包含的元素之外 ，打破了布局。 在下面的例子中，我在上面添加到我的博客頁面中的代碼。 該截圖是取自在肖像模式下一個iPhone（寬320像素），以及頁面的其余部分已經(jīng)縮水，使嵌入的內(nèi)容適合屏幕。 很不理想！
幸運的是，這個使用CSS周圍的方式。 首先，我將向您展示如何使用嵌入式視頻做到這一點，然后用日歷。
響應(yīng)視頻
該標(biāo)記
為了使嵌入內(nèi)容敏感，你需要添加一個含包裝周圍的iframe 。 您的標(biāo)記將如下所示：
<div> <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0"> </iframe> </div>
接下來的步驟是添加的造型與這個新的包裝和iframe在其內(nèi)。
CSS的
首先，我們的樣式含包裝用.video-container類。 所建議的蒂埃里Koblentz在他的ALA的文章“創(chuàng)建內(nèi)在指標(biāo)對于視頻” ，我們可以使用下面的代碼片斷在我們的樣式表：
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden; }
這個做了幾件事情：
- 的設(shè)置
position，以relative允許我們使用絕對定位的iframe本身，我們將在短期內(nèi)。 - 的
padding-bottom值計算出視頻的縱橫比。 在這種情況下，寬高比為16:9，表示高度將是寬的56.25％。 對于具有4:3寬高比的視頻中，我們設(shè)置padding-bottom至75％。 - 該
padding-top值設(shè)置為30像素，以便鉻的空間-這是特定的YouTube視頻。 - 的
height被設(shè)定為0，因為padding-bottom給人的元素，它需要的高度。 我們不設(shè)置寬度，因為它會自動包含這個分區(qū)的反應(yīng)元件調(diào)整。 - 設(shè)置
overflow來hidden，確保這個項目的突出之外的任何內(nèi)容將被隱藏起來。
我們還需要樣式化的iframe本身添加以下到你的樣式表：
.video-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
這個目標(biāo)iframe的內(nèi)線容器用.video-container類。 讓我們的工作，通過代碼：
- 絕對定位，是因為包含的元素有一個高度
0。 如果iframe的正常進(jìn)行定位，我們將給予它的高度0為好。 - 在
top和left的屬性中包含元素正確定位的iframe中。 - 的
width和height的屬性，確保視頻占用所用的容器元素（這實際上是設(shè)置填充）空間的100％。
這樣做之后，視頻現(xiàn)在將調(diào)整與屏幕的寬度。 下面是它的外觀在桌面上：
而這里的它會如何看一個屏幕，320像素寬于：
讓我們進(jìn)入到嵌入的內(nèi)容其他來源 – 特別是，谷歌日歷。
響應(yīng)日歷
該標(biāo)記
該CSS來制作任何形式的嵌入式內(nèi)容響應(yīng)本質(zhì)上是相同的，但不同的內(nèi)容會有不同的縱橫比，這意味著你將需要設(shè)置padding-bottom相應(yīng)的值。
下面是我管理的一所小學(xué)，一個網(wǎng)站， 嵌入了谷歌日歷網(wǎng)站的屏幕截圖。 正如你所看到的，在日歷打破在小屏幕上的布局。 在這種情況下，被顯示在正確的寬度的網(wǎng)站，但在日歷超出屏幕的寬度。
的標(biāo)記嵌入日歷如下：
<iframe src="https://www.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&src=60aqhusbghf7v0qvvbfu1ml22k%40group.calendar.google.com&color=%232952A3&ctz=Europe%2FLondon" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe>
要制作日歷響應(yīng)，添加一個div與類的.calendar-container包含iframe的：
<div> <iframe src="https://www.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&src=60aqhusbghf7v0qvvbfu1ml22k%40group.calendar.google.com&color=%232952A3&ctz=Europe%2FLondon" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"> </iframe> </div>
接下來的步驟是這個樣式的div。
CSS的
的CSS日歷幾乎是相同的CSS，一個視頻，但有兩個例外：寬高比會有所不同，并且padding-top是沒有必要的。
以下內(nèi)容添加到你的樣式表：
.calendar-container { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; }
在這種情況下， iframe是800像素寬，600像素高，這給我們的寬高比為4:3。 所以，設(shè)置padding-bottom為75%
這樣做之后，我們需要將相同的造型適用于這個新容器中的iframe元素：
.calendar-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
這正是我們應(yīng)用到視頻相同的造型。
現(xiàn)在，日歷將與瀏覽器窗口調(diào)整大小，如下所示在Opera移動對Android手機(jī)：
只要你記得來包裝你的嵌入式日歷和視頻與含有適當(dāng)?shù)脑?，那么這個CSS將適用于任何新的視頻和日歷添加到您的網(wǎng)站上。
但問題是，雖然可以容納一個頁面上的整個日歷，它仍然是幾乎無法使用，因為點擊的目標(biāo)是如此之小 ，沒有信息是可見的。 如果你絕對要顯示谷歌日歷，你可以，但如果你可以像使用簡單的CSS更實用的響應(yīng)日歷解決方案（設(shè)定display: block上表中的行，例如），或w3widgets響應(yīng)日歷或Calendario為自己的日歷，你用戶可能會欣賞它。
響應(yīng)視頻使用CSS或JavaScript
如果您正在開發(fā)使用內(nèi)容管理系統(tǒng)中的敏感網(wǎng)站，然后其中一個網(wǎng)站的編輯或更多可能要嵌入的視頻在一些點。 你可以指向你的編輯器來產(chǎn)生響應(yīng)的<embed>代碼中嵌入豐富的第三方媒體與點擊，與單獨的CSS。 或者，您也可以使用JavaScript的解決方案，從不必添加額外的CSS和標(biāo)記舒緩神經(jīng)的編輯。 但是，只要你能避免這條道路，就更好了，當(dāng)然。
直到最近，大多數(shù)解決方案都是插件，這是確定的程度，但可以有性能問題。 一個流行的插件是FitVids.js ，由Chris Coyier和Paravel發(fā)展。
較新的解決方案是只使用一個腳本-如FluidVids.js ，由托德·座右銘開發(fā)。 FluidVids.js是使用簡單 ：
- 下載腳本從GitHub上（郵政編碼），并把它上傳到你的服務(wù)器使用相同的文件夾結(jié)構(gòu)，將下載的文件進(jìn)來，這將會把腳本本身在一個命名的文件夾
dist。 - 調(diào)用腳本在每個頁面的
<head>用下面的代碼段：
<script src="dist/fluidvids.js></script>
這就是所有你需要做的，使視頻調(diào)整在所有支持JavaScript的設(shè)備。 它不僅適用于YouTube上，但或是Vimeo，太。 但問題是，如果你的用戶沒有JavaScript支持或JavaScript的還沒有加載或JavaScript沒有正確加載，可以使用唯一的回退是下面的添加到您的樣式表：
iframe { max-width: 100%; }
這將確保視頻重新調(diào)整瀏覽器窗口的寬度。 但不會調(diào)整視頻的身高，不幸的是， iframe是行不通的這種方式。 因此，視頻不會破壞你的布局，但它不會很好看無論是。 這是不是一個真正的好的選擇，所以如果你能避免使用JavaScript的視頻，這是一個好主意，這樣做 。
回應(yīng)谷歌地圖
除了視頻和日歷，另一個常見的??問題是谷歌地圖的嵌入，響應(yīng)。 基本上，我們再次使用相同的內(nèi)在比技術(shù)，當(dāng)設(shè)置padding-bottom的包裝，我們只是除以高度除以寬度并添加長寬比在CSS中。
通常情況下，通過谷歌地圖生成的代碼是這樣的：
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3022.260812859955!2d-73.990184!3d40.756288!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb134c693ac14a04c!2sThe+TimesCenter!5e0!3m2!1sen!2suk!4v1393485725496" width="500" height="450" frameborder="0" style="border:0"></iframe>
我們只是換一個div周圍iframe和運用熟悉CSS樣式給它：
.google-maps { position: relative; padding-bottom: 90%; // (450 ÷ 500 = 0.9 = 90%) height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
這就是標(biāo)記的樣子：
<div> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="500" height="450" frameborder="0" style="border:0"></iframe> </div>
瞧！ 同樣，我們可以只使用EmbedResponsively生成復(fù)制粘貼代碼與點擊。
總結(jié)
嵌入內(nèi)容有破響應(yīng)布局的習(xí)慣，因為它包含在一個iframe有一個固定的寬度。 在這篇文章中，我們已經(jīng)看到了如何添加一個含包裝，和一些CSS，以確保包含在所有的嵌入式內(nèi)容iframe調(diào)整大小的瀏覽器窗口。
有時是不夠好，但有時你可能需要拿出更多的先進(jìn)的解決方案，因為調(diào)整大小并不總是一個解決方案。 我們也看了embed代碼生成器和可選擇的解決方案，使用JavaScript，這可能有必要在某些情況下，特別是如果編輯要處理許多影片，不具備所需的技術(shù)技能，或者CMS不允許內(nèi)嵌造型。
你如何嵌入您的網(wǎng)站響應(yīng)第三方內(nèi)容？ 你發(fā)現(xiàn)任何特別的技巧或技術(shù)？ 什么是您的工作流程中嵌入這些內(nèi)容是什么樣子？
