simuler la taille de l’arrière-plan: couvrir sur <video> ou <img>
Comment puis-je simuler les fonctionnalités de background-size:cover sur un élément html tel que <video> ou <img>?
Je voudrais que ça marche comme
background-size: cover;
background-position: center center;
Voici comment j'ai fait ça. Un exemple de travail est dans this jsFiddle .
var min_w = 300; // minimum video width allowed
var vid_w_orig; // original video dimensions
var vid_h_orig;
jQuery(function() { // runs after DOM has loaded
vid_w_orig = parseInt(jQuery('video').attr('width'));
vid_h_orig = parseInt(jQuery('video').attr('height'));
$('#debug').append("<p>DOM loaded</p>");
jQuery(window).resize(function () { resizeToCover(); });
jQuery(window).trigger('resize');
});
function resizeToCover() {
// set the video viewport to the window size
jQuery('#video-viewport').width(jQuery(window).width());
jQuery('#video-viewport').height(jQuery(window).height());
// use largest scale factor of horizontal/vertical
var scale_h = jQuery(window).width() / vid_w_orig;
var scale_v = jQuery(window).height() / vid_h_orig;
var scale = scale_h > scale_v ? scale_h : scale_v;
// don't allow scaled width < minimum video width
if (scale * vid_w_orig < min_w) {scale = min_w / vid_w_orig;};
// now scale the video
jQuery('video').width(scale * vid_w_orig);
jQuery('video').height(scale * vid_h_orig);
// and center it by scrolling the video viewport
jQuery('#video-viewport').scrollLeft((jQuery('video').width() - jQuery(window).width()) / 2);
jQuery('#video-viewport').scrollTop((jQuery('video').height() - jQuery(window).height()) / 2);
// debug output
jQuery('#debug').html("<p>win_w: " + jQuery(window).width() + "</p>");
jQuery('#debug').append("<p>win_h: " + jQuery(window).height() + "</p>");
jQuery('#debug').append("<p>viewport_w: " + jQuery('#video-viewport').width() + "</p>");
jQuery('#debug').append("<p>viewport_h: " + jQuery('#video-viewport').height() + "</p>");
jQuery('#debug').append("<p>video_w: " + jQuery('video').width() + "</p>");
jQuery('#debug').append("<p>video_h: " + jQuery('video').height() + "</p>");
jQuery('#debug').append("<p>vid_w_orig: " + vid_w_orig + "</p>");
jQuery('#debug').append("<p>vid_h_orig: " + vid_h_orig + "</p>");
jQuery('#debug').append("<p>scale: " + scale + "</p>");
};#video-viewport {
position: absolute;
top: 0;
overflow: hidden;
z-index: -1; /* for accessing the video by click */
}
#debug {
position: absolute;
top: 0;
z-index: 100;
color: #fff;
font-size: 12pt;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video-viewport">
<video autoplay controls preload width="640" height="360">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"type="video/mp4" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm"type="video/webm" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv"type="video/webm" />
</video>
</div>
<div id="debug"></div>jsFiddle
L'utilisation de la couverture d'arrière-plan convient aux images, de même que la largeur 100%. Celles-ci ne sont pas optimales pour <video>, et ces réponses sont trop compliquées. Vous n'avez pas besoin de jQuery ou de JavaScript pour créer un arrière-plan vidéo pleine largeur.
Gardez à l'esprit que mon code ne couvrira pas complètement l'arrière-plan avec une vidéo comme celle-ci, mais rendra la vidéo aussi grande que nécessaire pour conserver les proportions et couvrir tout l'arrière-plan. Tout excès de vidéo se détachera de la page, de quel côté dépend le point d'ancrage de la vidéo.
La réponse est assez simple.
Utilisez simplement ce code vidéo HTML5, ou quelque chose du genre: (test en pleine page)
html, body {
width: 100%;
height:100%;
overflow:hidden;
}
#vid{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}<video id="vid" video autobuffer autoplay>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>Les options min-height et min-width permettront à la vidéo de conserver le rapport hauteur/largeur de la vidéo, qui correspond généralement au rapport hauteur/largeur de tout navigateur normal à une résolution normale. Tout excès de vidéo saigne sur le côté de la page.
C’est quelque chose qui m’a tiré les cheveux pendant un moment, mais j’ai trouvé une excellente solution qui n’utilise aucun script et qui permet de réaliser une simulation de couverture parfaite sur une vidéo avec 5 lignes de CSS (9 si l’on compte les sélecteurs et les crochets). ). Cela a 0 cas Edge dans lesquels cela ne fonctionne pas parfaitement, sans compatibilité avec CSS3 .
Vous pouvez voir un exemple ici
Le problème avec la solution de Timothy , c'est qu'il ne gère pas correctement la mise à l'échelle. Si l'élément environnant est plus petit que le fichier vidéo, il n'est pas réduit. Même si vous attribuez à la balise vidéo une taille initiale minuscule, telle que 16 pixels sur 9 pixels, auto finit par le forcer à respecter la taille minimale de son fichier. Avec la solution actuelle la plus votée sur cette page, il était impossible pour moi de réduire la taille du fichier vidéo, ce qui entraînait un effet de zoom radical.
Si le format de votre vidéo est connu, par exemple 16: 9, vous pouvez effectuer les opérations suivantes:
.parent-element-to-video {
overflow: hidden;
}
video {
height: 100%;
width: 177.77777778vh; /* 100 * 16 / 9 */
min-width: 100%;
min-height: 56.25vw; /* 100 * 9 / 16 */
}
Si l'élément parent de la vidéo est défini pour couvrir toute la page (tel que position: fixed; width: 100%; height: 100vh;), la vidéo le sera également.
Si vous souhaitez également que la vidéo soit centrée, vous pouvez utiliser la méthode de centrage infaillible:
/* merge with above css */
.parent-element-to-video {
position: relative; /* or absolute or fixed */
}
video {
position: absolute;
left: 50%; /* % of surrounding element */
top: 50%;
transform: translate(-50%, -50%); /* % of current element */
}
Bien sûr, vw, vh et transform sont des CSS3, donc si vous avez besoin de compatibilité avec des navigateurs beaucoup plus anciens , vous devrez utiliser un script.
Les autres réponses étaient bonnes mais elles impliquaient javascript ou ne centraient pas la vidéo horizontalement ET verticalement.
Vous pouvez utiliser cette solution CSS complète pour créer une vidéo simulant la propriété background-size: cover:
video {
position: fixed; // Make it full screen (fixed)
right: 0;
bottom: 0;
z-index: -1; // Put on background
min-width: 100%; // Expand video
min-height: 100%;
width: auto; // Keep aspect ratio
height: auto;
top: 50%; // Vertical center offset
left: 50%; // Horizontal center offset
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%); // Cover effect: compensate the offset
background: url(bkg.jpg) no-repeat; // Background placeholder, not always needed
background-size: cover;
}
La solution de M-Pixel est génial car il résout le problème de redimensionnement de réponse de Timothy (la vidéo sera agrandie mais pas réduite, donc si votre vidéo est vraiment grande, elle est bonne il est probable que vous ne verrez qu’un petit zoom dans une partie de celui-ci). Cependant, cette solution repose sur de fausses hypothèses liées à la taille du conteneur vidéo, à savoir qu'il correspond nécessairement à 100% de la largeur et de la hauteur de la fenêtre de visualisation. J'ai trouvé quelques cas où cela ne fonctionnait pas pour moi. J'ai donc décidé de régler le problème moi-même et je pense avoir trouvé la solution ultime .
HTML
<div class="parent-container">
<div class="video-container">
<video width="1920" height="1080" preload="auto" autoplay loop>
<source src="video.mp4" type="video/mp4">
</video>
</div>
</div>
CSS
.parent-container {
/* any width or height */
position: relative;
overflow: hidden;
}
.video-container {
width: 100%;
min-height: 100%;
position: absolute;
left: 0px;
/* center vertically */
top: 50%;
-moz-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
}
.video-container::before {
content: "";
display: block;
height: 0px;
padding-bottom: 56.25%; /* 100% * 9 / 16 */
}
.video-container video {
width: auto;
height: 100%;
position: absolute;
top: 0px;
/* center horizontally */
left: 50%;
-moz-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
}
Il est également basé sur le rapport de la vidéo. Par conséquent, si votre vidéo a un rapport autre que 16/9, vous souhaiterez modifier le pourcentage de remplissage inférieur. Autre que cela, cela fonctionne hors de la boîte. Testé dans IE9 +, Safari 9.0.1, Chrome 46 et Firefox 41.
EDIT (17 mars 2016)
Depuis que j'ai posté cette réponse, j'ai écrit un petit module CSS pour simuler à la fois background-size: cover et background-size: contain sur <video> éléments: http://codepen.io/benface/pen/NNdBMj
Il prend en charge différents alignements pour la vidéo (similaire à background-position). Notez également que l'implémentation contain n'est pas parfaite. Contrairement à background-size: contain, la vidéo ne sera pas redimensionnée au-delà de sa taille réelle si la largeur et la hauteur du conteneur sont plus grandes, mais je pense que cela peut toujours être utile dans certains cas. J'ai également ajouté les classes fill-width et fill-height spéciales que vous pouvez utiliser avec contain pour obtenir un mélange spécial de contain et cover... essayer et n'hésitez pas à l'améliorer!
Basé sur réponse de Daniel de Wit et commentaires, j'ai cherché un peu plus. Merci à lui pour la solution.
La solution consiste à utiliser object-fit: cover; qui a un grand support (tout le monde le supporte). Si vous voulez vraiment supporter IE, vous pouvez utiliser un polyfill comme object-fit-images ou object-fit .
Démos:
img {
float: left;
width: 100px;
height: 80px;
border: 1px solid black;
margin-right: 1em;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}<img class="fill" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="contain" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="cover" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="none" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="scale-down" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>et avec un parent:
div {
float: left;
width: 100px;
height: 80px;
border: 1px solid black;
margin-right: 1em;
}
img {
width: 100%;
height: 100%;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}<div>
<img class="fill" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="contain" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="cover" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="none" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="scale-down" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div>object-fit: cover est la meilleure réponse avec cet IE, Safari Polyfill.
https://github.com/constancecchen/object-fit-polyfill
Il supporte les éléments img, video et picture.
CSS et little js peuvent faire en sorte que la vidéo couvre l’arrière-plan et qu’elle soit centrée horizontalement.
CSS:
video#bgvid {
position: absolute;
bottom: 0px;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
overflow: hidden;
}
JS: (lie ceci avec une fenêtre redimensionnant et appelle une fois séparément)
$('#bgvid').css({
marginLeft : '-' + ($('#bgvid').width()/2) + 'px'
})
Juste après notre longue section de commentaires, je pense que c’est ce que vous recherchez, il est basé sur jQuery:
HTML:
<img width="100%" id="img" src="http://uploads8.wikipaintings.org/images/william-adolphe-bouguereau/self-portrait-presented-to-m-sage-1886.jpg">
JS:
<script type="text/javascript">
window.onload = function(){
var img = document.getElementById('img')
if(img.clientHeight<$(window).height()){
img.style.height=$(window).height()+"px";
}
if(img.clientWidth<$(window).width()){
img.style.width=$(window).width()+"px";
}
}
</script>
CSS:
body{
overflow: hidden;
}
Le code ci-dessus utilise la largeur et la hauteur des navigateurs. Si vous faisiez cela dans une div, vous devriez le changer en quelque chose comme ceci:
Pour Div:
HTML:
<div style="width:100px; max-height: 100px;" id="div">
<img width="100%" id="img" src="http://uploads8.wikipaintings.org/images/william-adolphe-bouguereau/self-portrait-presented-to-m-sage-1886.jpg">
</div>
JS:
<script type="text/javascript">
window.onload = function(){
var img = document.getElementById('img')
if(img.clientHeight<$('#div').height()){
img.style.height=$('#div').height()+"px";
}
if(img.clientWidth<$('#div').width()){
img.style.width=$('#div').width()+"px";
}
}
</script>
CSS:
div{
overflow: hidden;
}
Je dois également préciser que je n'ai testé que Google Chrome ... voici un jsfiddle: http://jsfiddle.net/ADCKk/
La meilleure réponse ne réduit pas la vidéo lorsque la largeur du navigateur est inférieure à celle de votre vidéo. Essayez d’utiliser ce CSS (#bgvid étant l’id de votre vidéo):
#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}
Cette question a une prime ouverte de +100 points de réputation de Hidden Hobbes qui se termine dans 6 jours. Utilisation inventive des unités de fenêtres pour obtenir une solution flexible uniquement avec CSS.
Vous avez ouvert une prime sur cette question pour une solution uniquement CSS, je vais donc l'essayer. Ma solution à un problème comme celui-ci consiste à utiliser un rapport fixe pour décider de la hauteur et de la largeur de la vidéo. J'utilise habituellement Bootstrap, mais j'en ai extrait le CSS nécessaire pour que cela fonctionne sans. C’est un code que j’avais utilisé précédemment pour centrer, entre autres choses, une vidéo intégrée avec le bon ratio. Cela devrait fonctionner aussi pour les éléments <video> et <img>. C'est le premier élément qui est pertinent ici, mais je vous ai également donné les deux autres, car je les avais déjà vus. Bonne chance! :)
.embeddedContent.centeredContent {
margin: 0px auto;
}
.embeddedContent.rightAlignedContent {
margin: auto 0px auto auto;
}
.embeddedContent > .embeddedInnerWrapper {
position:relative;
display: block;
padding: 0;
padding-top: 42.8571%; /* 21:9 ratio */
}
.embeddedContent > .embeddedInnerWrapper > iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
.embeddedContent {
max-width: 300px;
}
.box1text {
background-color: red;
}
/* snippet from Bootstrap */
.container {
margin-right: auto;
margin-left: auto;
}
.col-md-12 {
width: 100%;
}<div class="container">
<div class="row">
<div class="col-md-12">
Testing ratio AND left/right/center align:<br />
<div class="box1text">
<div class="embeddedContent centeredContent">
<div class="embeddedInnerWrapper">
<iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&jqoemcache=eE9xf" width="425"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
Testing ratio AND left/right/center align:<br />
<div class="box1text">
<div class="embeddedContent rightAlignedContent">
<div class="embeddedInnerWrapper">
<iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&jqoemcache=eE9xf" width="425"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
Testing ratio AND left/right/center align:<br />
<div class="box1text">
<div class="embeddedContent">
<div class="embeddedInnerWrapper">
<iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&jqoemcache=eE9xf" width="425"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>je suis gunna post cette solution aussi, depuis que j'ai eu ce problème, mais les autres solutions ne fonctionnent pas pour ma situation ...
je pense que pour simuler correctement la propriété background-size:cover; css sur un élément au lieu d'une propriété background-image d'éléments, vous devez comparer le rapport de format d'image au format de fenêtre actuel, quelle que soit la taille (et si l'image est plus haute que large) la fenêtre est l'élément en train de la remplir (et aussi de la centrer, bien que je ne sache pas si c'était une exigence) ...
en utilisant une image, juste pour des raisons de simplicité, je suis sûr qu'un élément vidéo fonctionnerait bien aussi.
d'abord, obtenez le rapport hauteur/largeur des éléments (une fois chargé), puis attachez le gestionnaire de redimensionnement de la fenêtre, puis déclenchez-le une fois pour le dimensionnement initial:
var img = document.getElementById( "background-picture" ),
imgAspectRatio;
img.onload = function() {
// get images aspect ratio
imgAspectRatio = this.height / this.width;
// attach resize event and fire it once
window.onresize = resizeBackground;
window.onresize();
}
ensuite, dans votre gestionnaire de redimensionnement, vous devez d'abord déterminer s'il convient de remplir la largeur ou la hauteur en comparant le rapport de format actuel de la fenêtre au rapport de format d'origine de l'image.
function resizeBackground( evt ) {
// get window size and aspect ratio
var windowWidth = window.innerWidth,
windowHeight = window.innerHeight;
windowAspectRatio = windowHeight / windowWidth;
//compare window ratio to image ratio so you know which way the image should fill
if ( windowAspectRatio < imgAspectRatio ) {
// we are fill width
img.style.width = windowWidth + "px";
// and applying the correct aspect to the height now
img.style.height = (windowWidth * imgAspectRatio) + "px";
// this can be margin if your element is not positioned relatively, absolutely or fixed
// make sure image is always centered
img.style.left = "0px";
img.style.top = (windowHeight - (windowWidth * imgAspectRatio)) / 2 + "px";
} else { // same thing as above but filling height instead
img.style.height = windowHeight + "px";
img.style.width = (windowHeight / imgAspectRatio) + "px";
img.style.left = (windowWidth - (windowHeight / imgAspectRatio)) / 2 + "px";
img.style.top = "0px";
}
}
Cette approche utilise simplement CSS et HTML. En fait, vous pouvez facilement empiler un div sous la vidéo. Il est couvert mais pas centré pendant que vous redimensionnez.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</script>
</head>
<body>
<div id = "contain">
<div id="vid">
<video autoplay>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
</video>
</div>
</div>
</body>
</html>
CCS:
/*
filename:style.css
*/
body {
margin:0;
}
#vid video{
position: absolute;
right: 0;
top: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
#contain {
width:100%;
height:100%;
zoom:1%;/*Without this the video will be stretched and skewed*/
}
Vieille question, mais au cas où quelqu'un verrait cela, la meilleure réponse à mon avis est de convertir la vidéo en un fichier GIF animé. Cela vous donne beaucoup plus de contrôle et vous pouvez simplement le traiter comme une image. C'est aussi le seul moyen pour que cela fonctionne sur mobile, car vous ne pouvez pas lire automatiquement les vidéos. Je sais que la question demande de le faire dans une balise <img>, mais je ne vois pas vraiment l’inconvénient d’utiliser un <div> et de faire background-size: cover
Les gars, j'ai une meilleure solution c'est court et fonctionne parfaitement pour moi. Je l'ai utilisé pour la vidéo. Et son imite parfaitement l'option de couverture en CSS.
Javascript
$(window).resize(function(){
//use the aspect ration of your video or image instead 16/9
if($(window).width()/$(window).height()>16/9){
$("video").css("width","100%");
$("video").css("height","auto");
}
else{
$("video").css("width","auto");
$("video").css("height","100%");
}
});
Si vous retournez le if, sinon vous obtiendrez.
Et voici le css. (Vous n'avez pas besoin de l'utiliser si vous ne voulez pas de positionnement au centre, la division parent doit être " position: relative ")
CSS
video {
position: absolute;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;}
Pour répondre au commentaire de weotch que Timothy Ryan Carpenter la réponse de == ne prend pas en compte le centrage de l'arrière-plan de cover, j'offre ce correctif CSS rapide:
CSS:
margin-left: 50%;
transform: translateX(-50%);
L'ajout de ces deux lignes centrera n'importe quel élément. Mieux encore, tous les navigateurs prenant en charge la vidéo HTML5 prennent également en charge les transformations CSS3, de sorte que cela fonctionnera toujours.
Le CSS complet ressemble à ceci.
#video-background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
margin-left: 50%;
transform: translateX(-50%);
}
J'aurais directement commenté la réponse de Timothy, mais je n'ai pas assez de réputation pour le faire.