html作物高度視頻到高度100vh，視頻到全屏

我正在用一個愚蠢的小東西掙扎。在做這個網站： http://i333180.iris.fhict.nl/p2_vc/ （對不起慢服務器，學校的東西，你知道的）html作物高度視頻到高度100vh，視頻到全屏

您將看到的視頻是在高度VH100，女巫是笏我想要的。當我在瀏覽器的最大高度上播放此視頻時，視頻的寬度不是全屏。代碼我現在有：

HTML

<!-- video --> 
<video id="moodvideo" autoplay loop> 
    <source src="moodvideo.mp4" type='video/mp4'> 
</video>

CSS

/* Video */ 
video { 
    height: 100vh; 
    width: 100vw; 
}

什麼，我想要實現全屏，寬爲100Wh和高度100vh上的視頻。如果寬度爲100wh的視頻的高度大於100vh，那麼我希望視頻剪切，以便在全屏視圖上顯示瀏覽器的最大高度和高度。通過裁剪，我不打算錯過一些視頻（從底部開始爲50像素左右），全屏寬度和高度對我來說更重要。

現在，我已經搜索，並嘗試了很多之前問你們，認爲像; vw100/vh100，最小高度/寬度100，添加電影在一個div，div到100 vh/vw，以及一些我發現的腳本，但沒有真正的作品...

來源

2015-06-12 Jim Vercoelen

你可以使用jquery videoBG插件：http://syddev.com/jquery.videoBG/

或者你可以添加以下代碼：https://jsfiddle.net/wcv2ak9p/1/

當瀏覽器不支持該視頻顯示的替換圖像。

HTML

<video id="moodvideo" autoplay loop> 
    <source src="moodvideo.mp4" type='video/mp4'> 
    <img id="alternative" src="alternative.jpg" /> 
</video>

CSS

#moodvideo, #alternative { 
    width: 100vw; /* Could also use width: 100%; */ 
    height: 100vh; 
    object-fit: cover; 
    position: fixed; /* Change position to absolute if you don't want it to take up the whole page */ 
    left: 0px; 
    top: 0px; 
    z-index: -1; 
}

來源

2015-06-12 22:54:29 TheOnlyError

媽呀，太感謝你了，真正的！最後的工作（對我來說是最簡單的方法）!!!!!嘗試幾個小時，所以謝謝!!!!：D –

沒有問題，我的樂趣:) – TheOnlyError

注意：'目標適合'目前不支持[IE]（http://dev.modern.ie/platform/status/objectfitandobjectposition）。你不得不使用[polyfill]（https://github.com/anselmh/object-fit） – quantumwannabe

html作物高度視頻到高度100vh，視頻到全屏

回答

相關問題