热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用css或javascript放置100%高度和100%宽度的视频

如何解决《使用css或javascript放置100%高度和100%宽度的视频》经验,为你挑选了2个好方法。

我想放置一个html5视频(当然还有视频标签)100%宽度和100%高度,它将在后台播放.这是一个图像的例子,我想要一个视频完全相同,我只是没有找到如何做到这一点:

#image {
    background-image: url("image.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

JSFiddle:http://jsfiddle.net/u9ncpyfu/



1> ala_747..:

你可以尝试:

header {
    position: relative;
    background-size: cover;
    background-position: 50% 50%;
    height: 100vh;
    z-index: 0;
}
header h1 {
    text-align: center;
    font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif;
    color: #fff
}
header video {
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
}

    

Sample Title



2> pschueller..:

如果我理解正确,这应该像将min-height和min-width设置为100%一样简单.例如:

#video {
    position: fixed;
    left: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

这可能需要针对响应性进行调整.

看看这个jsfiddle.


编辑:

如果您还希望视频保持居中,则将其包装在容器中,如下所示:

#video-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#video {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;   
}

推荐阅读
author-avatar
风里火
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有