将视频设为全屏尺寸 CSS
Posted
技术标签:
【中文标题】将视频设为全屏尺寸 CSS【英文标题】:Make a video be full screen size CSS 【发布时间】:2015-12-09 16:41:06 【问题描述】:我正在使用 videojs.com 视频播放器,效果很好,唯一的问题是我希望视频播放器为全屏尺寸,而不是使用像素,例如,如果您在较小的屏幕上播放视频玩家看起来一团糟。 我尝试使用 100% 而不是 px 但它也搞砸了很多。 有没有其他方法可以让它自动适应整个屏幕?
<video id="player" class="video-js vjs-default-skin" controls autplay="true" preload="auto"
poster="FF7.png"
data-setup="">
<source src="FF7.mp4" type='video/mp4' />
<track kind="subtitles" src="FF7.vtt" srclang="en" label="Svenska"></track>
</video>
【问题讨论】:
Is there a way to make html5 video fullscreen? 的可能重复项 【参考方案1】:在此处查看Codepen
video
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
【讨论】:
没有帮助...现在看起来更糟了:/ gyazo.com/678b7bd35604140b9340a8767f733207 你看过codepen吗?只需获取您需要的代码,而不是全部。如果没有帮助,请删除翻译。并且位置固定 鉴于 codepen 有效而您的网站无效,我觉得您网站的 HTML 或 CSS 可能存在一些特殊的干扰。在层次结构中的视频上方,你能找到任何在 CSS 中设置position
属性的元素吗?【参考方案2】:
您可以为您的视频使用父级div
容器,因此它就像您的视频的跨浏览器锚一样。你也可以使用media querymin-aspect-ratio
和max-aspect-ratio
。
带有编辑器的 Codepen 示例:
http://codepen.io/jonathan/pen/bEbdmz/?editors=110
全屏模式下的 Codepen 示例:
http://codepen.io/jonathan/full/bEbdmz/
HTML
<div id="video-wrapper">
<video id="player" class="video-js vjs-default-skin" controls autplay="true" preload="auto" poster="FF7.png" data-setup="">
<source src="FF7.mp4" type='video/mp4' />
<track kind="subtitles" src="FF7.vtt" srclang="en" label="Svenska"></track>
</video>
</div>
CSS:
html, body
height:100%;
body
margin:0;
padding:0;
#video-wrapper
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
#video-wrapper > #player
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor:pointer;
@media (min-aspect-ratio: 16/9)
#video-wrapper > #player
height: 300%;
top: -100%;
@media (max-aspect-ratio: 16/9)
#video-wrapper > #player
width: 300%;
left: -100%;
如果你想要一个 javascript 全屏解决方案,你可以使用以下一些:
http://vodkabears.github.io/vide/
http://dfcb.github.com/BigVideo.js/
http://syddev.com/jquery.videoBG/
【讨论】:
以上是关于将视频设为全屏尺寸 CSS的主要内容,如果未能解决你的问题,请参考以下文章
Silverlight播放器:点击按钮(html / javascript)将视频设置为全屏? [关闭]
旋转 90 时如何将 TextureView 大小调整为全屏?