-
Notifications
You must be signed in to change notification settings - Fork 4
Video 垂直置中
dreamline2 edited this page Nov 11, 2013
·
2 revisions
PATH : wilson\demo\video_center
<head>
<meta charset="UTF-8">
<title>HTML5 影片置中</title>
<style>
body{
margin:0;
padding:0;
overflow: hidden;//負責隱藏多餘的部分
}
#wrapper{
position: relative;//為了讓#key-render定位於#wrapper裡面
margin:0 auto;//左右置中
width:0;//目的為了置中，故寬度多少不是重點。 PS:不能設百分比，因為父元素無設定寬
}
#key-render{
position: absolute;//為了讓#key-render定位於#wrapper裡面
left:-960px;//左右置中下必要參數，寫死且不能設百分比，唯一缺點要先知道影片寬，此例1920px/2 = 960px
}
</style>
</head>
<body>
<div id="wrapper">
<video id="key-render" loop autoplay controls>
<source src="http://media.blizzard.com/wow/warlords-of-draenor-6y1fz/video/key-render.webm" type="video/webm">
</video>
</div>
</body>