web-dev-qa-db-fra.com

Vidéo 100% largeur et hauteur

J'ai une vidéo et je veux qu'elle remplisse 100% de la largeur et 100% de la hauteur. Et conservez le rapport hauteur/largeur.

Est-il possible qu'il remplisse au moins 100% pour les deux? Et si un peu de vidéo doit être sorti de l'écran pour conserver le rapport d'aspect, cela n'a pas d'importance.

HTML:

    <video preload="auto" class="videot" id="videot" height="100%" preload>
    <source src="BESTANDEN/video/tible.mp4" type="video/mp4" >
    <object data="BESTANDEN/video/tible.mp4" height="1080">
        <param name="wmode" value="transparent">
        <param name="autoplay" value="false" >
        <param name="loop" value="false" >
    </object>

CSS:

 .videof, .videot {
    width: 100%    !important;
    height: 100%   !important;
 }
htmlcsshtml5-videofullscreen
26
Milan

Vous pouvez utiliser Javascript pour définir dynamiquement la hauteur sur 100% de la fenêtre, puis le centrer à l'aide d'une marge gauche négative basée sur le rapport largeur vidéo/largeur de fenêtre. 

http://jsfiddle.net/RfV5C/

var $video  = $('video'),
    $window = $(window); 

$(window).resize(function(){
    var height = $window.height();
    $video.css('height', height);

    var videoWidth = $video.width(),
        windowWidth = $window.width(),
    marginLeftAdjust =   (windowWidth - videoWidth) / 2;

    $video.css({
        'height': height, 
        'marginLeft' : marginLeftAdjust
    });
}).resize();
11
Gladstone24

En vérifiant les autres réponses, j'ai utilisé object-fit en CSS:

video {
    object-fit: fill;
}

Depuis MDN ( https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit ):

La propriété CSS ajustée à l'objet spécifie comment le contenu d'un élément remplacé doit être adapté à la zone définie par sa hauteur et sa largeur utilisées.

Valeur: remplir

Le contenu remplacé est dimensionné pour remplir la zone de contenu de l’élément: la taille de l’objet concret est la largeur et la hauteur utilisées de l’élément.

45
Leo Yu
video {
  width: 100%    !important;
  height: auto   !important;
}

Jetez un oeil ici http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

12
JerryHuang.me

Cela fonctionne pour moi pour la vidéo dans un conteneur div.

.videoContainer 
{
    position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;
}

.videoContainer video 
{
    min-width: 100%;
    min-height: 100%;
}

Référence: http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos

10
Lee Chun Hoe

Si vous recherchez l'équivalent de background-size: cover pour video.

video {
  object-fit: cover;
}

Cela remplira le conteneur sans déformer la vidéo.

PS: Je m'étends sur la réponse de Leo Yu ici.

9
Fabian Schultz

Plus facile et réactif.

<body>
  <video src="full.mp4" autoplay muted loop></video>
</body>
video {
  height: 100vh;
  width: 100%;
  object-fit: fill;
  position: absolute;
}
4
hussein sayed

C’est un excellent moyen de faire de la vidéo une bannière. Vous devrez peut-être ajuster un peu cela en plein écran, mais cela devrait aller. 100% CSS.

    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);

2
Alex Durston

J'utilise JavaScript et CSS pour y parvenir. La fonction JS doit être appelée une fois à l'initialisation et au redimensionnement de la fenêtre. Vient de tester en Chrome.

HTML:

<video width="1920" height="1080" controls>
    <source src="./assets/video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

JavaScript:

function scaleVideo() {
    var vid = document.getElementsByTagName('video')[0];
    var w = window.innerWidth;
    var h = window.innerHeight;

    if (w/16 >= h/9) {
        vid.setAttribute('width', w);
        vid.setAttribute('height', 'auto');
    } else {
        vid.setAttribute('width', 'auto');
        vid.setAttribute('height', h);
    }
}

CSS:

video {
    position:absolute;
    left:50%;
    top:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}
2
walteronassis

Nous avons essayé avec le code ci-dessous et cela fonctionne sur Samsung TV, Chrome, IE11, Safari ...

<!DOCTYPE html>
<html>
<head>
    <title>Video</title>
    <meta charset="utf-8" />
    <style type="text/css" >

        html,body {
          height: 100%;
          text-align: center;
          margin: 0;
          padding:0;
        }

        video {
            width: 100vw; /*100% of horizontal viewport*/
            height:100vh; /*100% of vertical viewport*/
        }

    </style>
</head>
<body>
        <video preload="auto" class="videot" id="videot" preload>
            <source src="BESTANDEN/video/tible.mp4" type="video/mp4" >
            <object data="BESTANDEN/video/tible.mp4" height="1080">
                <param name="wmode" value="transparent">
                <param name="autoplay" value="false" >
                <param name="loop" value="false" >
            </object>
        </video>
</body>
</html>
0
Dobin

Je suis nouveau dans tout cela. Peut-être que vous pouvez simplement ajouter/changer ce code HTML. Sans besoin de CSS. Cela a fonctionné pour moi :)

width="100%" height="height"
0
Keyz