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