jquery - 如何让 HTML5 视频占据浏览器窗口的全高和全宽?

标签 jquery html css html5-video

我需要视频在第一页加载时占据浏览器的全部宽度和高度,我使用的是 Bootstrap 。你是如何做到这一点的?:

下面的代码有点像,但是高度超过了浏览器的 100%。我希望能够向下滚动到下方的文本,因此视频仅显示在顶部。

DEMO

html, body {
 height: 100%;
 }

#homepage-video {
    height: 100%;
    width: 100%;
 }
<div class="container-fluid">
 <div class="row">
  <video id="homepage-video" autoplay="true" loop="true" >
   <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
     type="video/mp4" />
         Your browser does not support HTML5 videos.
       </video>
     </div>
   </div>
   <div class="container">
        // Text in here....
   </div>

最佳答案

你可以通过 jquery 来设置它,只需包含一个 jquery 库并添加下面的代码

$(function(){
    $('video').css({width:$(window).width(), height:$(window).height()});
});

关于jquery - 如何让 HTML5 视频占据浏览器窗口的全高和全宽?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39462187/

相关文章:

javascript - 当按钮单击事件触发时,滚动条移动到顶部。我想在特定位置停止滚动条移动

javascript - 尝试使用 JQuery 加载 HTML 源代码

javascript - 使用 jquery 禁用启用按钮

html - 使用 Bootstrap 停靠页脚

css - Z 索引显示问题

外边框比内边框厚的CSS双边框

javascript - 如何获得被 CSS 覆盖的内联样式!使用 JavaScript 很重要

jquery - 如果未收到正确响应,则运行 ajax 固定时间

javascript - 在 Bootstrap 中向上/向下滑动

javascript - 模式中多个文本框的更改事件