2016-02-05 82 views
0

我希望視頻標籤粘貼到頂部(或視頻標籤上方元素的底部)。當使用當前代碼調整窗口大小時,視頻元素也會從頂部(或HTML中層次結構中的元素底部)移除。有沒有辦法阻止視頻從頂端鬆動?我認爲這是因爲視頻標籤試圖保持它的比例,可能與寬度有關:100%。視頻標籤粘貼問題

我做了一個JSFiddle here這裏是我的代碼:

HTML:

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

CSS:

.background-video 
{ 
    position: relative; 
} 

.background-video video 
{ 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    margin: 0 auto; 
    height: 1080px; 
    width: 100%; 
} 

那麼,如何讓這個視頻標籤不以不愉快的方式調整大小並仍然正確填充空間?

+0

你必須設置高度爲1080px,但寬度爲100% 。所以高度總是保持不變,但寬度會縮放。你有沒有嘗試過使用'height:auto' – JamieC

+0

也,你的小提琴不工作,因爲你需要鏈接到一個實際的視頻 – JamieC

+0

是的,但它不是關於視頻本身,只是視頻標籤,它被稱爲「填寫任何視頻源你想要「的情況。 – Barrosy

回答

0

您必須添加到您CSS這條線的視頻,圖像,iframe的響應元素等

CSS

audio, iframe, img, video { 
max-width: 100%; 
}