Bootstrap 背景图像更改为视频

如何解决Bootstrap 背景图像更改为视频

以下 CSS 代码片段是问题所在：

.masthead {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 35rem;
  padding: 15rem 0;
  background: linear-gradient(to bottom,rgba(0,0.3) 0%,0.7) 75%,#000000 100%),url("/assets/img/header_flow.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
  }

我想将图像（目前为 GIF）更改为 mp4，但它没有显示在除 Safari 之外的任何浏览器中......？！因为它从某个地方获得了 IMG 的给定属性，所以...

改变这一点的诀窍是什么？我知道还有另一种方法可以将 HTML 中的 () 块作为 () 块，但我不想因为只有一小行代码而将整个网站框架编写为新的 ..o.O

编辑：

我在 HTML 中解决了它

<header class="masthead">
            <div class="video-bg">
                <video muted autoplay loop source src="/assets/vid/video.webm" type="video/webm"></video> 
            </div>
                <div class="overlay"></div>
                    <div class="container d-flex h-100 align-items-center">
                        <div class="mx-auto text-center">
                            <h1 class="mx-auto my-0 text-uppercase">Title</h1>
                            <h2 class="text-white-50 mx-auto mt-2 mb-5">Subtitle</h2>
                            <a class="btn btn-primary js-scroll-trigger" href="#contactus">Contact</a>
                        </div>
                    </div>
        </header>

这对我来说并不令人满意。使用 Bootstrap 应该可以在 CSS 中更改此设置，否则在 CSS 中链接 bg 文件的选项非常无用。

感谢@all 的回答，即使它没有给我我搜索的解决方案 :D

解决方法

实际上，您不能在 CSS 中为背景标签放置 MP4 文件。您必须使用 src 中的视频创建一个 div。

这是一个例子：

HTML：

<video autoplay muted loop src="path/to/video.mp4"></video>

<div class="content">
    <p>Lorem ipsum dolor sit amet,an his etiam torquatos. Tollit soleat phaedrum te duo,eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro,pri ponderum tractatos ei. Id qui nemore latine molestiae,ad mutat oblique delicatissimi pro.</p>
</div>

CSS：

video {
    position: fixed /* or absolute,depend on what you want to do */
    right: 0;
    min-width: 100%
    min-height: 100%
}

.content {
    width: 100%;
    /* And do whatever you want to do with your content */
}

https://www.w3schools.com/howto/howto_css_fullscreen_video.asp