【问题标题】:How to get HTML5 video to take up full height and width of browser window?如何让 HTML5 视频占据浏览器窗口的全高和全宽?
【发布时间】:2016-09-13 04:21:47
【问题描述】:

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

下面的代码可以做到这一点,但高度超过了浏览器的 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>

【问题讨论】:

  • 您必须提供更多详细信息。我在本地对此进行了测试,它的行为符合预期。也许 Bootstrap 正在添加其他样式,您需要在 height!important

标签: jquery html css html5-video


【解决方案1】:

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

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

【讨论】:

    猜你喜欢
    • 2021-10-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-02-05
    • 2011-01-16
    • 2013-02-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多