用視頻做網頁背景

1.首先你需要準備一個視頻吧，然後下載Vidage的相關插件，下載地址，這裏是此demo用到的，可以自行去官網下載，並引入

<script src="assets/Vidage.min.js"></script>
<script>
    new Vidage('#VidageVideo');
</script>

2.構造一個容器,並放入視頻資源

<div class="Vidage">


    <video id="VidageVideo" class="Vidage__video" preload="metadata" loop autoplay muted>
        <source src="videos/bg.mp4" type="video/mp4">
    </video>
    </div>

這裏把視頻的相關樣式代碼放出來，關鍵點在於佈滿屏幕和透明度設置顯示等

.Vidage--allow .Vidage__video {
    display: block
}

.Vidage--allow .Vidage__image {
    display: none
}

.Vidage {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1
}

.Vidage, .Vidage__video {
    min-width: 100%;
    min-height: 100%
}

.Vidage__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    display: none
}

爲了讓頁面好看一點，在這裏加入了一點其他內容

    <div class="bg_class"></div>
    <div class="text_class">
        <h1>張傑 Jason</h1>
        <p> 燃爆 帥氣 正直 真誠 歌手</p>
        <p> Better Man</p>
        <a class="btn_class">start now</a>
    </div>

樣式如下，因爲我製作的時候同時考慮了自適應，所以樣式的代碼看上去比較多，自己可以選擇刪掉哦，

.bg_class {
    background: rgba(0, 0, 0, .6);
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px
}

.text_class {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    text-align: center
}

.btn_class {
    background-color: #43bc71;
    border: 1px solid #2b9152;
    transition: background-color .5s ease;
    cursor: pointer;
    display: inline-block;
    width: 200px;
    padding: 20px;
    text-align: center;
    font-size: 24px;
    color: #fff;
    border-radius: 5px;
}

.btn_class:hover {
    background-color: #2b9152
}

.text_class h1 {
    font-size: 60px;
    color: #fff;
}

.text_class p {
    font-size: 30px;
    color: #fff;
    padding: 20px 0px;
}

3.成果展示，不能提供視頻，那就放幾張圖片感受一下吧，視頻做背景，頁面真的會炫酷一點哦，喜歡

就這樣就實現了以視頻爲背景，若有疑問可以在下方提問哦