當我們網(wǎng)站想后臺發(fā)布文章，而文章中帶有視頻，這個視頻通常是采用 iframe 方式嵌入的。如下代碼：

<iframe src="https://www.xxx.com" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

如果在發(fā)布時清除了原來的格式，那么這個嵌入的視頻也隨之變得很小。那么到底有沒有比較簡單快捷的方法，讓iframe嵌入的視頻寬度和高度，達到一個正常的，或適應(yīng)當前頁面寬度高度的方法呢？

下面我們分析一下，如何解決這個問題。

有人說可以用css來設(shè)置，其寬度和高度為100%或其它數(shù)字。可是本站技術(shù)員實踐過，寬度是可以自適應(yīng)，能看到變化，可是高度怎么設(shè)置也不會變，如果寬度是100%而高度沒有變化，那么視頻在頁面中就被拉扯變形了，這不就是反向調(diào)整優(yōu)化嗎！

有人說用 javascript 來進行控制，但是為什么要把簡單的事情復雜化呢？

用下面這個方法，只用幾行css樣式就能夠?qū)崿F(xiàn)自適應(yīng)，先來看下css樣式代碼，復制下面的css樣式，放到網(wǎng)站使用的樣式表文件里。

.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video iframe,
.video object,
.video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

然后我們在發(fā)布文章時，切換至 html 源代碼模式，在視頻標簽，iframe，或object，或embed的上級html標簽中（對比上面的css文件層級），加入class=”video”即可。

例如下面示例代碼，上級標簽是<p>，那么就在<p>標簽里加入class=”video”：

<p class="video">
  <iframe src="https://www.xxoo.com" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</p>

刷新網(wǎng)站的樣式文件及頁面，發(fā)現(xiàn)變了。視頻嵌入已經(jīng)實現(xiàn)了寬高自適應(yīng)。

雖然這樣每次發(fā)布帶視頻的內(nèi)容時，還是需要去寫個 class=”video”，但比寫死高度和寬度而造成響應(yīng)式的網(wǎng)站，移動端視頻就只能看到某一部分了要好很多。

成功實踐后再回頭看看起作用的css，那個 padding-bottom 為何是 56.25% 這個數(shù)字還是讓小伙伴們懵圈，如果你把它去掉或改成其他數(shù)字，你會看到明顯的高度變化。這是什么css計算原理在起作用呢？

自己可以調(diào)試一下，總之，能解決問題就行，本技術(shù)員也不知道怎么解釋！

補充：如果內(nèi)容頁是全寬，如達到1920像素，那么視頻的寬度也就隨之變大，但視頻實際尺寸只有1200像素，這明顯超過視頻原有尺寸，這時候畫面就會變得失真模糊，那么這種情況下我們就要對 video 樣式加以修改調(diào)整，具體調(diào)整如下：

.video {
  position: relative;
  padding-bottom: 36.25%;
  height: 0;
  overflow: hidden;
  max-width: 640px;
  max-height: 360px;
  margin: 0 auto;
}

對比之前的樣式，這里修改 padding-bottom 為36.25%, margin:0 auto 則是讓視頻的位置居中對齊，同時新增加max-width值為640px，max-height的值為360px。