如何適應div背景上顯示的視頻？

有人可以幫助我適應網站背景上的視頻？視頻源來自Vimeo的......我用iframe，我將視頻設置爲SRC如何適應div背景上顯示的視頻？

<iframe src="https://player.vimeo.com/video/45628635?loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

我需要的狀態，你可以在圖像看到

來源

2016-10-04 Denis Stephanov

確保黑網吧不是視頻本身的一部分。 – MartijnK

給iframe標籤自己的類，把它的父容器，就像這樣。

<div class="container"> 
    <iframe class="vid" src="https://player.vimeo.com/video/45628635?loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div>

然後使用CSS變換和得到的500像素100％，高度容器寬度和隱藏溢出向上擴展的視頻。

.vid{ 
    transform: scale(2.5); 
} 

.container{ 
    width: 100%; 
    height: 500px; 
    overflow: hidden; 
}

並把溢出隱藏任何對象上這個「容器」 DIV將位於。

來源

2016-10-04 13:20:18 Swordys

謝謝!!作品:) –

沒問題，祝你好運！ – Swordys

這背景似乎是視頻的一部分。你可以改變寬度來切斷黑色背景，就像這個例子。 width:93%https://jsfiddle.net/ps96r3ub/

「https://player.vimeo.com/video/45628635?loop=1&background=1」寬度= 「93％」 HEIGHT = 「500px的」 FRAMEBORDER = 「0」 webkitallowfullscreen mozallowfullscreen的allowFullScreen>

來源

2016-10-04 13:02:56 mthomp

但我需要固定高度的完整網站寬度上的視頻...因此，我需要縮放視頻並填充它 –

左右區域似乎是視頻本身的一部分，您可以使用transform：scale （1.133,1）;在畫面上拉伸視頻，以便您看不到黑色背景，因爲容器會將其切斷，或者只是改變寬度以像以前一樣切斷它。這裏的差距是在這裏的源https://player.vimeo.com/video/45628635?loop=1&background=1 – mthomp

從Swordys代碼...選中此片斷...

.container{ 
 
    width:100%; 
 
    height:500px; 
 
    overflow:hidden; 
 
    } 
 
.vid{ 
 
transform: scale(2.5); 
 
}

<div class="container"> 
 
<iframe class="vid" src="https://player.vimeo.com/video/45628635?loop=1&background=1" width="80%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 
    </div>

來源

2016-10-04 13:15:11 cna327

這是我的實際狀態的人...我需要刪除黑色邊框和縮放內容，以適應網站的寬度與固定高度 –

如何適應div背景上顯示的視頻？

回答

相關問題