如何让视频全屏答案

【问题标题】：how to make video full screen如何让视频全屏
【发布时间】：2016-03-18 20:42:56
【问题描述】：

我要全屏？

我的旧代码是这样的

    <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>

如何使用 css 使其全屏显示，因为当我尝试运行此代码时它会像 padding-top 一样离开？？

这是我的工作 https://jsfiddle.net/f0Lcdfrt/4/

【问题讨论】：

查看本主题stackoverflow.com/questions/6039909/html5-full-screen-video
更新我的描述，请帮忙

标签： jquery html css video

【解决方案1】：

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

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 文档https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

【讨论】：

【解决方案2】：

视频元素不能用 css 全屏显示。你能做的最好的就是在<video> 标签中设置width="100%" height = "100%"。 See w3 schools如果你真的需要全屏，你将不得不做javascript从浏览器请求全屏。

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

【讨论】：

您的填充问题是由于 html 代码顶部的 <div> 标记造成的。这很可能是导致您的问题的原因。

【解决方案3】：

在您的小提琴视频中，src 不正确。在您的代码中尝试更改：

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

到这里：

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

或者只是添加css：

video {
    width: 100%;
    height: 100%;
}

【讨论】：

请检查您的小提琴链接。现在我看到video 有一个src 去404
如何将本地视频放入 jsfiddle。我尝试使用链接 youtube，但它没有运行
#Undefitied 但结果我可以向右滑动。不适合监视先生
#vicario 对不起，没看清楚你。试试看：jsfiddle.net/f0Lcdfrt/8

【解决方案4】：

.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%;
}

来自加科尼斯

【讨论】：