use*_*741 9 css video html5 responsive-design
我正在创建一个具有固定高度布局(不使用弹性框)的Web应用程序,我也受到宽度的限制.
我想将屏幕从中间切开,穿过中心,高度和宽度都在50%左右.
在屏幕的左边象限中,我不想插入HTML5视频播放器,在右边象限中我想插入一些文字和图像.
我可以使用flex-video中指定的技术来维护视频播放器的宽高比http://foundation.zurb.com/docs/components/flex-video.html
然而,这会打破视频溢出到屏幕的下半部分.
无论如何我可以通过单独使用CSS来解决这个问题吗？
这是我到目前为止所拥有的
<!DOCTYPE html>
<head>
<style>
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
font-family:sans-serif;
color:white;
}
video {
height: 100%;
}
.header{
height: 60px;
background: #002442;
position: relative;
}
.media-card-screen{
background: linear-gradient(to bottom, #004680 0%, #00080f 99%);
position: absolute;
width: 100%;
top:60px;
bottom: 0px;
}
.media-card{
height: calc(100% / 1.75);
}
.video-container{
width: 50%;
display: inline-block;
padding: 20px 20px 0px 20px;
height: 100%;
}
.video{
display: block;
overflow: hidden;
height: 0;
padding-bottom: 56.25%;
}
.title{
display: inline-block;
position: relative;
vertical-align: top;
height: 50px;
}
.title h1{
margin: 0;
padding: 0;
font-size: 26px;
}
.rating{
/*display: inline-block;
vertical-align: top;
position: absolute;
right: 0px;*/
}
.action-bar-container{
padding: 0;
margin-top: 20px;
list-style: none;
}
.action{
height: 50px;
line-height: 50px;
background: green;
margin: 0;
padding: 0;
}
.title-rating-container{
display:inline-block;
vertical-align: top;
width:49%;
position:relative;
overflow: auto;
height: 100%;
padding: 20px 20px 0px 0px;
}
.move-short-desc{
font-size: 18px;
}
.move-long-desc{
font-size: 18px;
}
.mc-action-bar{
-webkit-box-shadow: 0 2px 2px 0 black;
-ms-box-shadow: 0 2px 2px 0 black;
-moz-box-shadow: 0 2px 2px 0 black;
box-shadow: 0 2px 2px 0 black;
background: #004680;
height: 50px;
line-height: 50px;
text-align: left;
overflow: hidden;
white-space: nowrap;
padding: 0px 0px 0px 20px;
margin-top: 20px;
}
.more-like-this-bar{
height: 50px;
line-height: 50px;
background-color: rgba(0, 70, 128, 0.4);
}
.more-like-this-bar h3{
margin: 0px 0px 0px 20px;
padding: 0;
}
</style>
</head>
<body>
<div class="master-container">
<div class="header">
</div>
<div class="media-card-screen">
<div class="media-card">
<div class="video-container">
<div class="video">
<video id="video" controls="" preload="none">
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
</video>
</div>
</div>
<div class="title-rating-container">
<div class="title">
<h1>Captain Phillips</h1>
</div>
<img style="float:right; margin: 5px; width: 150px;" src="http://placehold.it/150x255">
<div class="rating">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Pg_cinema.png/626px-Pg_cinema.png" width="50" height="50">
</div>
<div class="expires">
<h3>Expires: 3hrs</h3>
</div>
<div class="duration">
<h3>Duration: 128mins</h3>
</div>
<div class="move-short-desc">
<p>The true story of Captain Richard Phillips and the 2009 hijacking by Somali pirates of the US-flagged MV Maersk Alabama, the first American cargo ship to be hijacked in two hundred years.</p>
</div>
<div class="move-long-desc">
<p>Two-time Academy Award winner Tom Hanks teams with Oscar-nominated director Paul Greengrass and screenwriter Billy Ray to tell the true story of Richard Phillips, a U.S. cargo-ship captain who surrendered himself to Somali pirates so that his crew would be freed. The MV Maersk Alabama was en route to Mombasa, Kenya, when it was surrounded and boarded by a gang of hardened bandits led by the determined Muse (Barkhad Abdi). As the crew of the Maersk Alabama rushed into a fortified "secure room" created for just such an incident, Phillips and Muse found themselves in a tense standoff that threatened to erupt into violence at any moment. Catherine Keener and Michael Chernus co-star. ~ Jason Buchanan, Rovi</p>
</div>
</div>
</div>
<div id="actionBar" class="mc-action-bar">
<div class="mc-action-button" data-call-to-action-button="buy">
<i class="icon-shopping-cart"></i><span>Buy</span>
</div>
<div class="mc-action-button" data-call-to-action-button="favourites">
<i class="icon-heart"></i><span>Remove From Favourites</span>
</div>
</div>
<div class="more-like-this">
<div class="more-like-this-bar">
<h3>MORE LIKE THIS</h3>
</div>
<div class="more-like-this-scroller-container">
</div>
</div>
</div>
</body>
</html>
我最近解决了同样的问题(参见http://jsfiddle.net/6PXhP/或以下):
<div class="aspect-ratio aspect-ratio-16-9">
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/ZjsbbdsFOOU?rel=0" frameborder="0" allowfullscreen=""></iframe>
</div>
在CSS中:
.aspect-ratio {
position: relative;
max-width: 100%;
height: auto;
}
.aspect-ratio > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.aspect-ratio-16-9 {
padding-top: 56.25% !important;
}
其中56.25%是9/16*100%.
max-height我使用和属性使它工作min-height。
不幸的是，测试时视频链接断开了，所以我无法验证容器内的视频是否渲染良好。
另外，我将其更改.video-container为浮动块，并删除.video样式。
这是完整修改后的代码：
<!DOCTYPE html>
<head>
<style>
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
font-family:sans-serif;
color:white;
}
video {
height: 100%;
width: 100%;
min-height: 100%;
max-height: 100%;
}
.header{
height: 60px;
background: #002442;
position: relative;
}
.media-card-screen{
background: linear-gradient(to bottom, #004680 0%, #00080f 99%);
position: absolute;
width: 100%;
top:60px;
bottom: 0px;
}
.media-card{
height: calc(100% / 1.75);
}
.video-container{
width: 50%;
display: block;
float: left;
padding: 20px 20px 0px 20px;
height: 100%;
}
/*.video{
display: block;
overflow: hidden;
height: 0;
padding-bottom: 56.25%;
}*/
.title{
display: inline-block;
position: relative;
vertical-align: top;
height: 50px;
}
.title h1{
margin: 0;
padding: 0;
font-size: 26px;
}
.rating{
/*display: inline-block;
vertical-align: top;
position: absolute;
right: 0px;*/
}
.action-bar-container{
padding: 0;
margin-top: 20px;
list-style: none;
}
.action{
height: 50px;
line-height: 50px;
background: green;
margin: 0;
padding: 0;
}
.title-rating-container{
display:inline-block;
vertical-align: top;
width:49%;
position:relative;
overflow: auto;
height: 100%;
padding: 20px 20px 0px 0px;
}
.move-short-desc{
font-size: 18px;
}
.move-long-desc{
font-size: 18px;
}
.mc-action-bar{
-webkit-box-shadow: 0 2px 2px 0 black;
-ms-box-shadow: 0 2px 2px 0 black;
-moz-box-shadow: 0 2px 2px 0 black;
box-shadow: 0 2px 2px 0 black;
background: #004680;
height: 50px;
line-height: 50px;
text-align: left;
overflow: hidden;
white-space: nowrap;
padding: 0px 0px 0px 20px;
margin-top: 20px;
}
.more-like-this-bar{
height: 50px;
line-height: 50px;
background-color: rgba(0, 70, 128, 0.4);
}
.more-like-this-bar h3{
margin: 0px 0px 0px 20px;
padding: 0;
}
</style>
</head>
<body>
<div class="master-container">
<div class="header">
</div>
<div class="media-card-screen">
<div class="media-card">
<div class="video-container">
<div class="video">
<video id="video" controls="" preload="none">
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
</video>
</div>
</div>
<div class="title-rating-container">
<div class="title">
<h1>Captain Phillips</h1>
</div>
<img style="float:right; margin: 5px; width: 150px;" src="http://placehold.it/150x255">
<div class="rating">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Pg_cinema.png/626px-Pg_cinema.png" width="50" height="50">
</div>
<div class="expires">
<h3>Expires: 3hrs</h3>
</div>
<div class="duration">
<h3>Duration: 128mins</h3>
</div>
<div class="move-short-desc">
<p>The true story of Captain Richard Phillips and the 2009 hijacking by Somali pirates of the US-flagged MV Maersk Alabama, the first American cargo ship to be hijacked in two hundred years.</p>
</div>
<div class="move-long-desc">
<p>Two-time Academy Award winner Tom Hanks teams with Oscar-nominated director Paul Greengrass and screenwriter Billy Ray to tell the true story of Richard Phillips, a U.S. cargo-ship captain who surrendered himself to Somali pirates so that his crew would be freed. The MV Maersk Alabama was en route to Mombasa, Kenya, when it was surrounded and boarded by a gang of hardened bandits led by the determined Muse (Barkhad Abdi). As the crew of the Maersk Alabama rushed into a fortified "secure room" created for just such an incident, Phillips and Muse found themselves in a tense standoff that threatened to erupt into violence at any moment. Catherine Keener and Michael Chernus co-star. ~ Jason Buchanan, Rovi</p>
</div>
</div>
</div>
<div id="actionBar" class="mc-action-bar">
<div class="mc-action-button" data-call-to-action-button="buy">
<i class="icon-shopping-cart"></i><span>Buy</span>
</div>
<div class="mc-action-button" data-call-to-action-button="favourites">
<i class="icon-heart"></i><span>Remove From Favourites</span>
</div>
</div>
<div class="more-like-this">
<div class="more-like-this-bar">
<h3>MORE LIKE THIS</h3>
</div>
<div class="more-like-this-scroller-container">
</div>
</div>
</div>
</body>
| 归档时间： |
|
| 查看次数： |
12073 次 |
| 最近记录： |