2015-10-15 93 views
1

我正在寻找一个div的背景(联系人和页脚格)的视频。这是在我的全屏幕上工作,但在移动不是。背景视频在div全部响应

我的HTML是:

<div class="header-unit"> 
    <div id="video-container"> 
      <video autoplay loop class="fillWidth" > 
        <source src="videos/video_contactme.m4v" type="video/mp4" /> 
        Your browser does not support the video tag. I suggest you upgrade your browser.</video> 
      <h1>...</h1> 
      <p>some contents</p 
    </div> 
</div> 

和我的CSS是:

.header-unit { 
    height: auto; 
    width:100%; 
    overflow: hidden; 
    position:absolute; 
    margin-left:auto; 
    margin-right:auto; 
} 
video { 
    position: absolute; 
    z-index: 0; 
} 
video.fillWidth { 
    width: 100%; 
    min-height: 100%; 
} 
#video-container { 
    width:100%; 
    overflow: hidden; 
    background-size:cover 
} 

那么,如何能我把它响应移动和iMac 27inch吗? (我尤斯引导)

回答

-1

这将让你的存在方式的一部分:http://alistapart.com/article/creating-intrinsic-ratios-for-video

你的主要问题将是设备的方向。桌面是水平的,肖像移动是垂直的......但内在比例会让你更接近你要找的比例。

+0

那篇文章是7年前写的。 2009年发生的其他事情:迈克尔杰克逊死了,阿凡达被释放,猪流感是一个'问题'。 – DickieBoy

+0

谢谢DickieBoy,超级有用 – meowsus