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

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

我可以找到这个article，但由于我还是Web开发的新手，所以无法做很多事情。

任何人都可以帮助我进行代码中要求的更改。

这是指向我的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;
        }

最佳答案

您可以使用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;
}

关于css - 如何在部分上添加视频背景？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30796017/