css - 如何在一个部分添加视频背景？

Question

我正在尝试用短视频替换页眉背景图片。我进行了很多搜索，但找不到合适的解决方案。

我能找到这个 article但不能做太多，因为我在网络开发方面仍然是新手。

任何人都可以帮助我完成代码中所需的更改。

这是我的 Fiddle 的链接.

HTML:

        <section>   
            <header>
                <h1><strong>Header</strong></h1>
                <p>Lorem Ipsum</p>
            </header>
            <footer>
                <a href="#first" class="button scrolly">US</a>
                <a href="#second" class="button scrolly">UK</a>
                <a href="#fifth" class="button scrolly">India</a>
                <a href="#third" class="button scrolly">China</a>
                <a href="#fourth" class="button scrolly">Mongolia</a>

            </footer>
        </section>

CSS:

.dark {
    color: #aaa;
    color: rgba(255, 255, 255, 0.65);
}

#header {
    position: relative;
    margin: 0;
    background-image: url("http://www.mygreencity.in/images/slider/1.jpg");
    background-size: auto, cover;
    background-position: top left, center center;
    background-repeat: repeat, no-repeat;
    padding: 14em 0 14em 0;
    text-align: center;
    color: #fff;
}

    #header header h1 {
        font-size: 2.25em;
        line-height: 1.25em;
        margin-bottom: 0;
    }

    #header header p {
        margin-top: 1.25em;
        font-weight: 100;
        padding: 0;
        font-size: 1.25em;
        line-height: 1.5em;
        text-align: center;
    }

    #header footer {
        padding-top: 1.5em;
    }

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
    -moz-transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    -webkit-appearance: none;
    position: relative;
    display: inline-block;
    background: #3d3d3d;
    padding: 0.85em 3em 0.85em 3em;
    border-radius: 0.25em;
    cursor: pointer;
    border: 0;
    color: #fff;
    text-align: center;
    text-decoration: none;
}

    input[type="button"]:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    button:hover,
    .button:hover {
        background: #4f4f4f;
    }

    input[type="button"].alt,
    input[type="submit"].alt,
    input[type="reset"].alt,
    button.alt,
    .button.alt {
        color: inherit;
        box-shadow: inset 0 0 0 1px #e6e6e6;
        background: none;
    }

        input[type="button"].alt:hover,
        input[type="submit"].alt:hover,
        input[type="reset"].alt:hover,
        button.alt:hover,
        .button.alt:hover {
            background: rgba(0, 0, 0, 0.025);
        }

.dark input[type="button"],
.dark input[type="submit"],
.dark input[type="reset"],
.dark button,
.dark .button {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 0 0 1px #fff;
    color: #fff;
}

    .dark input[type="button"]:hover,
    .dark input[type="submit"]:hover,
    .dark input[type="reset"]:hover,
    .dark button:hover,
    .dark .button:hover {
        background: rgba(255, 255, 255, 0.25);
    }

    .dark input[type="button"].alt,
    .dark input[type="submit"].alt,
    .dark input[type="reset"].alt,
    .dark button.alt,
    .dark .button.alt {
        background: none;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    }

        .dark input[type="button"].alt:hover,
        .dark input[type="submit"].alt:hover,
        .dark input[type="reset"].alt:hover,
        .dark button.alt:hover,
        .dark .button.alt:hover {
            background: rgba(255, 255, 255, 0.15);
            box-shadow: inset 0 0 0 1px #fff;
        }

Answer 1

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

或者您可以添加以下代码:https://jsfiddle.net/5oxjuyum/1/

当浏览器不支持视频时显示替代图像。

HTML

<video id="video" autoplay>
    <source src="video.mp4" type="video/mp4" />
    <img id="alternative" src="http://www.mygreencity.in/images/slider/1.jpg" />
</video>

CSS

#video, #alternative {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -1;
}