视频将延伸至整个主页

我在哪里可以找到一个主页框架，在那里我可以将HTML视频一直延伸到整个页面（达到一定的最大分辨率就可以了，比如最大宽度：2500px或其他）？

我使用的是我定制的一个212主题。我所需要的是一个顶部标题栏的标志和导航（100px高）和一个相同大小的页脚。屏幕的其余部分可以是视频。

这是我的一个简单的起点。将#页面宽度定义为较大的内容似乎会填满屏幕。内部的其余元素都设置为宽度：默认情况下为100%，因此看起来也很好。似乎无法使视频拉伸并填充父分区。

谢谢

<div id="page" style="width: 2400px; max-width: 2500px;">
    <header>
         <!-- Logo and nav here -->
    </header>

    <div id="main" class="wrapper">
      <video id="video_688987199_html5_api" class="vjs-tech" preload="auto" autoplay="" data-setup="{}" src="/wp-content/uploads/2018/04/video.mp4" poster="null">
         <source src="/wp-content/uploads/2018/04/video.webm" type="video/webm">
      </video>
    </div>
</div>

#main .vjs-tech { width:100vw; //Make as wide as the screen viewport height:auto; //Keep Aspect Ratio display:block; left:50%; //the left edge of the video is now in the center margin-left:-50vw; //move the video 50% of the viewport width to the left } #page { overflow-x:hidden; //if there is a vertical scroll bar, don\'t show the horizontal one }

小码农CODE

相关推荐

Responsive Wordpress Gallery