Jquery 如何制作视频全屏

我想做一个全屏

我的旧代码是这样的

    <div id="test"></div>


    <div id="body">lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue</div>


with css

#test{
  width: 100%;
  height: 100vh;
    background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  background-size: 100% 100%;
}

<div id="video">
  <div class="embed-responsive embed-responsive-16by9">
      <video id="video1">
          <source src="video/inspiration-1.mp4" type="video/mp4">
      </video>
      </div>
</div>

    <div id="body">lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue</div>

lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue
使用css
#试验{
宽度：100%；
高度：100vh；
背景：url（'https://placeholdit.imgix.net/~text？txtsize=33&txt=350%C3%97150&w=350&h=150'）无重复中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
背景大小：100%100%；
}

现在我想用视频改变图像，但是全屏，所以我像这样改变

    <div id="test"></div>


    <div id="body">lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue</div>


with css

#test{
  width: 100%;
  height: 100vh;
    background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  background-size: 100% 100%;
}

<div id="video">
  <div class="embed-responsive embed-responsive-16by9">
      <video id="video1">
          <source src="video/inspiration-1.mp4" type="video/mp4">
      </video>
      </div>
</div>

    <div id="body">lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue</div>

lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue

如何使用css使其全屏显示，因为当我尝试运行此代码时，它会像填充一样离开顶部

这是我的工作

---

您可以通过这种方式激活全屏模式

var elem = document.getElementById("video1");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

---

有关更多信息，请参见MDN文档

视频元素不能使用css全屏显示。您所能做的最好的事情就是在

标记中设置

width=“100%”height=“100%”

。如果您真的需要全屏，那么您必须使用javascript从浏览器请求全屏

var video = document.getElementById("myvideo");
if (video.requestFullscreen) {
  video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
  video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
  video.webkitRequestFullscreen();
}

---

在你的小提琴视频src是不正确的。 在代码中，尝试更改以下内容：

<div class="embed-responsive embed-responsive-16by9">
  <video id="video1">
      <source src="video/inspiration-1.mp4" type="video/mp4">
  </video>
  </div>

---

从Garconis检查此主题更新我的描述，请帮助请检查您的小提琴链接。现在，我看到

video

有一个

src

来说明如何将本地视频放入JSFIDLE。我尝试了链接youtube，但它没有运行#未定义，但结果我可以向右滑动。不适合监视，长官，代理对不起，我不明白你的意思。Try：填充问题是由于html代码顶部的

标记造成的。很可能是这导致了你的问题。

.wrapper {
    width:100%;
    height:100vh;
    overflow: hidden;
    background-image: url(http://www.webestools.com/page/media/videoTag/BigBuckBunny.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.wrapper video {
    object-fit: cover;
    width:100%;
    height:100%;
}