如何在HTML中伸展視頻的寬度？

這是CSS我使用：

.video { 
width: 100%; 
height: 500px; 
-webkit-transform: scaleX(2); 
-moz-transform: scaleX(2); 
} 
.video:before { 
background-image: url('http://farm8.staticflickr.com/7212/7329494986_c1191f6e55.jpg') repeat; 
width:100%; 
min-height:500px; 
}

，這是HTML我使用：

<div class="video"> 
<video width="1366" height="500" autoplay loop muted> 
<source src="video.mp4" type="video/mp4"> 
<source src="video.webm" type="video/webm"> 
</video> 
</div>

我要被拉伸的視頻（如它是），但它的寬度有點過大，超過了。正如您在THIS圖片中看到的那樣，視頻的寬度超過邊界，因此會添加水平滾動條。我希望有人能幫我解決我的這個寬度問題。

And this is the webpage I'm working on..

來源

2017-06-21 VenoM

沒有瀏覽器需要多年的WebKit和MOZ前綴。 – Rob

變化HTML和CSS

我發佈了以下工作片段。

工作筆

working pen

.video { 
 
    width: 100%; 
 
    height: 500px; 
 
    position:relative; 
 
    /* -webkit-transform: scaleX(2); */ 
 
    /* -moz-transform: scaleX(2); */ 
 
} 
 
.video:before { 
 
    background: rgba(0,0,0,0.5); /* You can use here image */ 
 
    width:100%; 
 
    height:500px; 
 
    content:''; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
}

<div class="video"> 
 
    <video width="100%" autoplay loop muted> 
 
<source src="video.mp4" type="video/mp4"> 
 
<source src="video.webm" type="video/webm"> 
 
</video> 
 
</div>

來源

2017-06-21 11:23:12 LKG

http：// imgur。com/cZWkQYv 希望能跨越兩端，可能嗎？ – VenoM

嘗試'寬度：100vh;'和'身高：100vh;' – LKG

檢查編輯答案 – LKG

從規格爲：

視頻內容要元素的播放區域內呈現，使得視頻內容顯示在適合完全在它的最大可能大小集中在回放區域，視頻內容的寬高比被保留。因此，如果播放區域的寬高比與視頻的寬高比不匹配，則視頻將顯示爲信箱或郵筒。元素播放區域中不包含視頻的區域不代表任何內容。

沒有規定伸展的視頻，而不是letterboxing它。這可能是因爲伸展給用戶帶來了非常不好的體驗，而且大部分時間都不是預期的。默認情況下，圖像被拉伸到合適的程度，因此，您會看到很多圖像嚴重扭曲在線，很可能是由於指定高度和寬度的一個簡單錯誤。

您可以使用CSS 3轉換實現拉伸效果，儘管這些轉換尚未在所有瀏覽器中完全標準化或實現，並且在實現它們的那些轉換中需要使用供應商前綴，如-webkit-或-moz-。這裏有一個例子：從HTML

<!DOCTYPE html> 
<style> 
video { 
    -webkit-transform: scaleX(2); 
    -moz-transform: scaleX(2); 
} 
</style> 
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></video>

來源

2017-06-21 10:54:27

刪除寬度和高度

<div class="video"> 
    <video autoplay loop muted> 
    <source src="video.mp4" type="video/mp4"> 
    <source src="video.webm" type="video/webm"> 
    </video> 
</div>

，並更改以下CSS如下：`

.video { 

     width: 100%; 
     height: 100%; 
     overflow: hidden; 
     -webkit-transform: scaleX(1); 
     -moz-transform: scaleX(1); 
     } 
     .video:before { 
     background-image: url('http://farm8.staticflickr.com/7212/7329494986_c1191f6e55.jpg') repeat; 
     width:100%; 
     min-height:500px; 
     }

來源

2017-06-21 11:05:02

這是網頁現在的樣子：http://imgur.com/JwY8se6 還有一些空間可以遮住右手 – VenoM

改變寬度爲110％或相應增加.. –

如何在HTML中伸展視頻的寬度？

回答

相關問題