响应式网站的视频高度和宽度 [英] Video height and width for responsive website
本文介绍了响应式网站的视频高度和宽度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在响应式网站上使用视频HTML5标记。我将高度和宽度设置为100%并且它工作正常,除了在移动版本中它正在破坏布局。
I am using the video HTML5 tag on a responsive website. I set the height and width to 100% and it works fine except in the mobile version where it's destroying the layout.
URL:omob-2.myshopify.com
URL: omob-2.myshopify.com
<div style="height: 100%; width: 100%;">
<video width="100%" height="100%" autoplay>
<source src="intro_12_07_14.mp4" type="video/mp4">
</video>
</div>
任何想法?
推荐答案
使用 CSS3 转换 翻译(-50%, - 50%)
将视频放在页面中央:
Use the CSS3 transform translate(-50%, -50%)
to make the video in the center of the page:
<div class="video-container">
<video autoplay loop="true" width="1280" height="720">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
CSS代码
CSS Code
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
body {
background: #000;
color: #fff;
font-family: 'Oxygen', sans-serif;
}
点击此处 demo 。
这篇关于响应式网站的视频高度和宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文