Maintenir le ratio d'aspect de la vidéo dans un correctif de la hauteur et de la largeur fixe de mise en page à l'aide de CSS
Je suis entrain de créer une application web qui a une hauteur fixe de mise en page (pas à l'aide de flex box) et je suis également limitée par la largeur.
Je veux tranche de l'écran vers le bas au milieu et à travers le centre à environ 50% de la hauteur et la largeur.
Dans le quadrant gauche de l'écran, je wan pas à insérer un lecteur vidéo HTML5 et dans le droit quadrant je veux insérer du texte et une image.
Je suis en mesure de maintenir le ratio d'aspect de la vidéo en utilisant la technique indiquée dans flex-vidéo ici http://foundation.zurb.com/docs/components/flex-video.html
Cependant cela rompt avec la vidéo déborde dans la moitié inférieure de l'écran.
Est-il de toute façon je peux résoudre ce problème en utilisant le CSS seul?
Voici ce que j'ai jusqu'à présent
<!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>Pourquoi le besoin de réactif vidéo si votre mise en page est fixe la largeur et la hauteur? Est-il une raison pour laquelle vous ne pouvez pas donner la vidéo fixe la largeur et la hauteur?
OriginalL'auteur user1812741 | 2013-10-31
Vous devez vous connecter pour publier un commentaire.
Récemment j'ai résolu le même problème (voir http://jsfiddle.net/6PXhP/ ou ci-dessous):
Et en CSS:
Où 56.25% est 9/16 * 100%.
OriginalL'auteur Erik Nijland
vous pouvez laisser le
videoobjet redimensionner automatiquement, il sera de maintenir le ratio d'aspect une fois que la vidéo est chargée (lors de l'appui sur la touche play) comme leimgtag:le css:
le code html:
le test:
http://jsfiddle.net/3WB2q/1/
OriginalL'auteur Facundo Colombier
Je l'ai fait travailler y à l'aide de la
max-heightetmin-heightpropriétés.Malheureusement la vidéo, des liens ont été en baisse pendant le test, j'ai donc pu'n vérifier si la vidéo à l'intérieur du conteneur est bien rendue.
Aussi, je changeur de la
.video-containerà une flottait bloc, et removerd la.videoles styles.Voici tout le code modifié :
OriginalL'auteur Creaforge