更改視頻的高度並保持相同的寬度

我有一個視頻我想更改高度並保持相同的寬度例如全屏上的寬度我認爲是100％，高度只有200px與本網站相同www .paypal.com 存在的問題是，當我改變高度寬度也自動地改變，並且視頻去的中心（水平拉伸）更改視頻的高度並保持相同的寬度

 <video autoplay class="embed-responsive-item"> 
      <source src=test.mp4 type=video/mp4> 
     </video>

視頻{寬度：100％; height：200px; }

感謝您的幫助

來源

2015-12-08 John_P

視頻本身是一個元素，它被饋送到與已存在的頁面相同的頁面中。我不知道有一種工具能夠以不同的尺寸或寬高比呈現您的視頻，而且您的用戶可能也不希望這樣做。另外，你在bootstrap中使用的任何東西都會故意讓你無法做到這樣的事情，因爲「響應」嵌入視頻的整個點是按縱橫比調整屏幕視圖的大小，所以視頻不會「看起來很可怕。您需要將外部視頻源重新渲染爲您嘗試創建的特定視圖大小。 –

貝寶網站使用的CSS屬性object-fit: cover以適應視頻相同的寬度。

的對象配合 CSS屬性指定一個替換元素的內容應該如何被裝配到由它的使用的高度和寬度確定的框。

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

.hero-home video { 
    display: block; 
    height: 100%; 
    width: 100%; 
    top: 0px; 
    position: absolute; 
    left: 0px; 
    z-index: -1; 
    object-fit: cover; /* this makes it fit within the video container */ 
    opacity: 0.9; 
    transition: opacity 0.3s ease 0s; 
}

爲object-fit

/* Keyword values */ 
object-fit: fill; 
object-fit: contain; 
object-fit: cover; 
object-fit: none; 
object-fit: scale-down; 

/* Global values */ 
object-fit: inherit; 
object-fit: initial; 
object-fit: unset;

可能的值，他們也正在使用的max-width，min-width，和min-height在一些<video>元素的父元素的混合。

只要檢查CSS看看他們在做什麼。您會看到部分視頻被隱藏，不會使用overflow:hidden在.video-container上顯示視頻的全部高度。

來源

2015-12-08 19:55:54

非常感謝你，先生，這就是我想要的，但請你能幫我做出相同的，但與位置：相對，因爲我想添加一些文本下這個視頻和絕對位置，我遇到了一些問題:)謝謝所以許多！ –

使用絕對位置時，必須確保在主視頻父元素上也使用'relative'位置。所以你絕對定位的元素是相對於它的父母。 https://developer.mozilla.org/en-US/docs/Web/CSS/position .. –

嗨，你可以給你的視頻的容器寬度和高度，然後給視頻元素最小寬度/高度這樣的視頻將停留在中心，只有寬度會改變，而不是高度。

.container { 
    width: 100%; 
    height: 100%; 
} 
video { 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -o-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 200px; 
    width: auto; 
    height: auto; 
}

來源

2015-12-09 10:51:46

更改視頻的高度並保持相同的寬度

回答

相關問題