jquery - 包含特定 div 的视频背景

标签 jquery css html html5-video

我正在努力将视频背景放入 div 中。 div 恰好也有 500px 的高度和 100% 的宽度,我希望视频背景适合整个 div,响应迅速。

HTML

<div id="dev_cms_vid_cont">
    <video id="cms_vid" loop muted autoplay poster="img/videoframe.jpg">
        <source src="'.BASE.'images/cms-bg.mp4" type="video/mp4">
    </video>
    <div id="dev_cms_cont">
         // content
    </div>
</div>';

CSS

 #dev_cms_vid_cont {
    height:500px; 
    position:relative;
 }
 #cms_vid {
    position:absolute; 
    right: 0; bottom: 0;
    min-width: 100%; 
    height: 500px;
    width: auto; z-index: 100;
    background: url(../images/home-intros.jpg) no-repeat;
    background-size: cover;
    margin: 0 auto;
 }

我不介意它是否需要 jquery 来整理,我只是希望能够有视频背景,包含在特定的 div 中,并用视频覆盖整个 div(不一定是显示的整个视频) .我做错了什么?

最佳答案

video{position:absolute; right: 0; bottom: 0;
 min-width: 100%; height: 500px;
 width: auto; z-index: 100;
 background: url(../images/home-intros.jpg) no-repeat;
 background-size: cover;
 margin: 0 auto;}

关于jquery - 包含特定 div 的视频背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38009317/

相关文章:

html - 如何排序此 HTML 表格的位置? - 我需要右侧的提交按钮,并且需要删除左侧的间距

jquery - 如何向下滑动元素的一部分

javascript - 仅为 UL 的第一个元素添加类样式(JS 或 jquery)

html - CSS3 中的悬停高度效果向下移动 div

html - 如何在 100% 高度图像下制作其他元素?

javascript - 根据 url 具有自定义内容的静态页面

javascript - 可将 IN 转换为 CM 的尺码表

iOS 中的 jQuery Mobile 下拉菜单错误

jQuery 将 url 变量传递给 load 函数

javascript - 如何停止滑动到最后一张幻灯片?