Menu
I am creating a web app that has a fixed height layout (not using flex box) and I am also constrained by the width.
I want to slice the screen down the middle and through the centre at around 50% for both height and width.
Within the left quadrant of the screen I wan't to insert a HTML5 video player and in the right quadrant I want to insert some text as well as an image.
I am able to maintain the aspect ratio of the video player by using the technique specified in flex-video here http://foundation.zurb.com/docs/components/flex-video.html
However this breaks with the video overflowing into the bottom half of the screen.
Is there anyway I can solve this problem by using CSS alone?
Here is what I have so far
<!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>
842
I've recently solved the same issue (see http://jsfiddle.net/6PXhP/ or below):
<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>
And in 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;
}
Where 56.25% is 9/16 * 100%.
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
