我最近玩過html5并且遇到了使用的想法

使用以下HTML代碼作為網站背景的全屏視頻：

另外,我使用以下css代碼來正確對齊它：

#video_background{

position: absolute;

bottom: 0px;

right: 0px;

min-width: 100%;

min-height: 100%;

max-width: 4000%;

max-height:4000%;

width: auto;

height: auto;

z-index: -1000;

overflow: hidden;

}

它工作得很好,但我希望我的視頻水平居中

在每個瀏覽器分辨率.

無論我試圖通過哪種方式實現這種效果(通過保證金或基于百分比的定位),

視頻保持堅持正確的底部.

關于如何解決這個“問題”的任何想法？

這是一個JQuery函數,我寫了很長一段時間才使視頻成為全屏背景.基本上,如果窗口的縱橫比高于視頻的縱橫比,則使高度100％和寬度自動,反之亦然,以獲得更寬的縱橫比窗口.

// Resize the video elements so that we don't get any borders due to aspect ratio

function resizeVideo() {

if ($(window).height() > $(window).width() * 0.5425) { // Which dimension is bigger dependant on aspect ratio (16:9)

$("video").removeAttr("height").removeAttr("width").width("auto").height("100%");

}

else {

$("video").removeAttr("height").removeAttr("width").width("100%").height("auto");

}

};

// Add the resize function to the window resize event but put it on a short timer as to not call it too often

var resizeTimer;

$(window).resize(function () {

clearTimeout(resizeTimer);

resizeTimer = setTimeout(resizeVideo,150);

});

總結

以上是生活随笔為你收集整理的html全屏背景视频特效,HTML – 中心全屏背景视频的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。