HTML5視頻具有固定高度，但比例寬度爲100％

我想要做的是擁有HTML5視頻比例100％的頁面寬度，但保持650px的固定高度。HTML5視頻具有固定高度，但比例寬度爲100％

下面的代碼擴展到保持縱橫比，這是不我需要什麼：

<header> 
 
    <video width="100%" autoplay="autoplay"> 
 
     <source src="video.webm" type="video/webm; codecs=vp8,vorbis"> 
 
    </video> 
 
</header>

我也嘗試了max-height="650px"但這只是中心的視頻和葉空白上任何一邊。

來源

2014-10-20 dantan04

你不能做到這一點，你可能需要閱讀本[鏈接]（https://html.spec.whatwg.org/multipage/embedded-content.html#video） – Nick 2014-10-20 18:50:17

在PayPal網站上，他們實現了它。[link]（https://www.paypal.com/uk/ webapps/mpp/home）標題視頻似乎不能保持寬高比。這是因爲他們使用了一些奇特的JavaScript嗎？ – dantan04 2014-10-20 18:54:47

paypal has'width：1179px;身高：自動;可見性：可見;'...所以他們只是把它設置爲'1179px' ...如果你縮小你的瀏覽器窗口，它不會重新調整 – starvator 2014-10-20 19:05:46

貝寶做的是根據視口擴大視頻。但他們不去移動，這是一個問題。

所以，如果你想擴展從小到大設備上的視頻，你可以把你的視頻與基本標記：

<video width="100%" height="auto">...

這將擴展您的視頻。問題是當你去一個小視口。視頻將縮小，但可能是太小了，所以你可以定義一個最小高度，並使用CSS變換來擴大視頻方面：

video{ 
transform: scale(1.5); 
-webkit-transform: scale(1.5); 
}

有了媒體查詢，你可以定義斷點和縮放這些視頻屏幕。

還有一些JavaScript，你也可以爲你的視頻定義一個焦點（如果視頻的某個區域更重要）。

來源

2014-11-03 22:31:10 Gustavo

我已經通過它包裝成實現兩個容器用一組高度（750px即），背面可見性這樣的：隱藏;和溢出：隱藏; - 讓視頻得到總共較大，但在底部被裁剪掉（感謝https://codepen.io/dudleystorey/pen/knqyK & http://fasett.no/）：

.header { 
 
\t height:750px; 
 
\t overflow: hidden; 
 
} 
 

 
video { 
 
\t display: block; 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -100; 
 
    -webkit-transform: translateX(-50%) translateY(-50%); 
 
    transform: translateX(-50%) translateY(-50%); 
 
\t pointer-events: none; 
 
\t overflow-y: hidden; 
 
\t vertical-align: top; 
 
} 
 

 
.container_video { 
 
\t -webkit-backface-visibility: hidden; 
 
\t -webkit-background-size: cover; 
 
\t -moz-background-size: cover; 
 
\t -ms-background-size: cover; 
 
\t -o-background-size: cover; 
 
\t background-size: cover; 
 
\t background-position: center center; 
 
\t background-repeat: no-repeat; 
 
\t -webkit-user-select: none; 
 
\t -moz-user-select: none; 
 
\t -ms-user-select: none; 
 
\t width: 100%; 
 
    height: 100%; 
 
\t z-index: 1; 
 
\t position: relative; 
 
}

<header class="header"> 
 
     <div class="container_video"> 
 
      <video preload="auto" autoplay loop muted poster="img/videobg.png" id="bgvid" src="//demosthenes.info/assets/videos/polina.mp4" ></video> 
 
     </div> 
 
     </header>

來源

2015-10-05 12:04:16 reTrOBIAS

HTML5視頻具有固定高度，但比例寬度爲100％

回答

相關問題