视频循环100％浏览器高度＆amp;宽度

时间：2016-01-13 19:23:53

标签： html css

我试图插入一个以100％高度响应显示的视频循环＆amp;浏览器窗口的宽度调整为适合.stage-0。目前该视频不适合100％高度＆amp; width和#overlay是否向右移动而不是坐在中心？任何有关如何创建此效果的帮助将不胜感激： - ）

＆＃13;
＆＃13; 
* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-size: 1em;
    font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
html,
body {
    height: 100%;
}
a {
    background: transparent;
    border: none;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: .3s color;
    transition: .3s height;
}

header {
    position: fixed;
    height: 60px;
    width: 100%;
}
.header-wrapper {
    width: 100%;
    height: 100%;
    background: transparent;
}
.header-bg,
.header-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
}
.header-bg {
    color: gray;
    background: white;
    border-bottom: 1px solid black;
    transition: .3s height;
    height: 0;
}
.header-content {
    margin-left: auto;
    margin-right: auto;
    transition: .3s color;
    color: white;
    background: transparent;
    height: 60px;
    transition: .3s height;
    overflow: hidden;
    list-style: none;
}
ul {
    width: 100%;
	text-align:center;
}
li {
	
    padding-top: 15px;
    display: inline-block;
    *display: inline;
    /*IE7*/
    
    *zoom: 1;
    /*IE7*/
    
    margin-right: 50px;
}
.navBarLinks {
    margin-left: auto;
    margin-right: auto;
    color: inherit;
    cursor: pointer;
    font-size: .8em;
    letter-spacing: 0.05em;
    transition: .3s color;
    padding-top: 15px;
    line-height: 31px;
}
.instagram {
    margin-left: auto;
    margin-right: auto;
    float: left;
    padding-left: 2%;
}

.home {
    left: 50%;
    position: absolute;
    transform: translate(-50%);
}
.insticon {
    margin-left: auto;
    margin-right: auto;
    float: right;
    width: 25px;
    height: 25px;
    padding: 15px;
    cursor: pointer;
    fill: white;
    font-size: .8em;
    letter-spacing: 0.05em;
    padding: .05px 10px;
}
@media only screen and (max-width: 583px) {
    .find {
        display: none;
    }
}

.hamburger {
    margin-left: auto;
    margin-right: auto;
    float: right;
    padding-right: 3%;
}
 #toggle-menu {
    float:right;
    display: block;
    width: 15px;
    height: 15px;
	}
	
.header-wrapper #toggle-menu span {
    width: 15px;
    height: 3px;
    position: absolute;
    -webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s 	ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    -moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    transform-origin: center;
	background: #fff;
	}
	}
	#toggle-menu span.top {
    top: 0px;
	}
	#toggle-menu span.middle {
    top: 6px;
	}
	#toggle-menu span.bottom {
    top: 12px;
	}
  
content {
    height: 2000px;
    background: orange;
}
.stage {
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    background: white;
    border-bottom: 1px solid black;
    font-size: 48px;
    height: 200px;
    width: 100%;
}
.stage-0 {
	display: flex;
    background: grey;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
}
  #overlay { 
    margin-left: auto;
    margin-right: auto;
  position: absolute; 
  top: 50%; 
  color: #FFF; 
  text-align: center;
  font-size: 20px;
  width: 100%;
}

.video {
    position: fixed;
	top: 50%;
	left: 50%;
    min-width: 100%;
	min-height: 100%;
	-webkit-transform: translate(-50%, -50%);
	 -ms-transform: translate(-50%, -50%);
	 transform: translate(-50%, -50%);
	z-index: -999;
	overflow: hidden;
}
/*promo video scroll*/

.arrow-bounce {
	padding: 5%;
    color: white;
    left: 50%;
    font-size: 26px;
    cursor: pointer;
    position: absolute;
    transform: translate(-50%);
    -webkit-transition: -webkit-transform 0.6s ease;
    -moz-transition: -moz-transform 0.6s ease;
    transition: transform 0.6s ease;
    -webkit-animation: arrow 1s infinite;
    -moz-animation: arrow 1s infinite;
    -o-animation: arrow 1s infinite;
    animation: arrow 1s infinite;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
@-webkit-keyframes arrow {
    0% {
        bottom: -13px;
    }
    50% {
        bottom: -8px;
    }
    100% {
        bottom: -13px;
    }
}
@-moz-keyframes arrow {
    0% {
        bottom: -13px;
    }
    50% {
        bottom: -8px;
    }
    100% {
        bottom: -13px;
    }
}
@keyframes arrow {
    0% {
        bottom: -13px;
    }
    50% {
        bottom: -8px;
    }
    100% {
        bottom: -13px;
    }
}
＆＃13; 
<header>
    <div class="header-wrapper">
        <div class="header-bg"></div>
        <div class="header-content">
            <ul>
                <li class="instagram">
                    <a href="" class="navBarLinks find">Find me on</a>
                    <a href="" class="navBarLinks in">
                        <svg class="insticon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
                            <style type="text/css">
                                .st0 {}
                            </style>
                            <path class="st0" d="M50.1,121.7H28.8V53h21.4V121.7z M39.4,43.6c-6.8,0-12.4-5.6-12.4-12.4s5.5-12.4,12.4-12.4
	c6.8,0,12.4,5.5,12.4,12.4C51.8,38,46.3,43.6,39.4,43.6z M130.1,121.7h-21.3V88.3c0-8-0.1-18.2-11.1-18.2
	c-11.1,0-12.8,8.7-12.8,17.6v34H63.5V53H84v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7
	C130.1,84,130.1,121.7,130.1,121.7z" />
                        </svg>
                    </a>
                </li>
                <li class="home"><a href="" class="navBarLinks">Logo </a>
                </li>
                <li class="hamburger">
                <a href="" id="toggle-menu" class="navBarLinks">
    <span id="top" class="burger"></span>
    <span id="middle" class="burger"></span>
    <span id="bottom" class="burger"></span>
    </a>
                </li>
            </ul>
        </div>
    </div>
</header>
<content>
    <div class="stage stage-0">
 <div id="overlay">Overlay Placeholder! </div>
<div id="arrow">
            <span class="arrow-bounce"><svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns=	"http://www.w3.org/2000/svg">
	<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
	<path d="M0-.75h24v24H0z" fill="none"/>
	</svg>
    </span>
        </div>



       <video class="media-player" loop autoplay src="http://ak9.picdn.net/shutterstock/videos/6236564/preview/stock-footage-cybernetic-brain-zooming-through-eye.mp4">
  </video>
        
       
        
    </div>
    <div class="stage stage-2">3</div>
    <div class="stage stage-4">5</div>
    <div class="stage stage-6">7</div>
    <div class="stage stage-8">9</div>
    <div class="stage stage-10">11</div>
    <div class="stage stage-12">13</div>
    <div class="stage stage-14">15</div>
    <div class="stage stage-16">17</div>
    <div class="stage stage-18">19</div>
    <div class="stage stage-20">21</div>
    <div class="stage stage-22">23</div>
</content>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

在视频代码中添加以下代码：

style="width: 100%;height: 1500px;object-fit: cover;"

这应该可行：）。

相关问题
最新问题