CSS背景Image/MovieURL？

Question

我注意到 GIF 并不是真正兼容所有浏览器，所以我一直在使用电影。直到现在一直在寻找。我有一个网站，其背景图片是用 css 编写的。我觉得这行不通，但我尝试像链接图像一样链接电影，但它甚至没有出现。下面是 html 和 css.

html

 <section id="slider">
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-2">
        <div class="block">
          <h1 class="animated fadeInUp">Need a Network?</h1>
          <p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
        </div>
      </div>
    </div>
  </div>
</section>

css

#slider {
background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px; 
}

据我了解，链接视频不会发生，那么还有什么选择？我该怎么做？我需要现在仍然显示的文本，并且电影是不透明的。如果我需要使实际电影本身不透明，我可以这样做。谢谢

可以一起浏览网站here

Answer 1

您可以查看如何添加视频Tutorial

编辑：编辑fiddle

var $vid = $('video','#container');
var $msg = $('#custom-message'); 
$msg.css({
    top:$vid.offset().top + (($vid.height()/2) - ($msg.height()/2)),
    left:$vid.offset().left + (($vid.width()/2) - ($msg.width()/2))
});

video {
  position: relative;
  z-index: -1;
}

#custom-message {
  position: absolute;
  color: rgb(230, 200, 200);
  z-index: 1;
}

#slider {
  background: url("../img/") no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: 10% 0%;
  padding: 200px 0 280px 0;
  position: relative;
}

#slider:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, #8b86a3, #322e40);
  opacity: 0.8;
}

#slider .block {
  color: #E3E3E4;
}

#slider .block h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 45px;
  line-height: 60px;
  letter-spacing: 10px;
  padding-bottom: 45px;
}

#slider .block p {
  font-size: 23px;
  line-height: 40px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  letter-spacing: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" align="center">

  <section id="slider">
<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-2">
      <div id="container" align="center">
        <video width="640" height="320" autoplay>
          <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
        </video>
        <div id="custom-message">
          Need a Network?</div>
        <div id="custom-message">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.
        </div>
      </div>
    </div>
  </div>
</div>
  </section>

Answer 2

您可以使用以下代码在 "need a network" 部分后面添加视频：

I replaced the video, and used the JavaScript code to "autoplay" the video!

If you think the video can autoplay without JavaScript, remove it!
I also replaced the iframe tag, with the video tag.

You can replace the video, by changing the src="" attribute on the <source> tag, inside the <video> tag.

function playVideo() {
document.getElementsByClassName('video')[0].play();
}

.video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -2;
object-fit: fill;
}
#slider {
/* Removed the background tags, since there are no image placed in the url of the background tag */
/*background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;*/
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
z-index: -1;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px; 
}

<body onload="playVideo()">
<section id="slider">
  <video class="video" autoplay="autoplay">
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
  </video>
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-2">
        <div class="block">
          <h1 class="animated fadeInUp">Need a Network?</h1>
          <p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
        </div>
      </div>
    </div>
  </div>
</section>
</body>

CSS背景Image/MovieURL？

CSS Background Image/Movie URL?

html

css

movie