Balise Video pour remplir 100% div indépendamment de ratios

Je suis attachant à avoir une balise vidéo pour remplir à 100% d'un div:

a) il n'a pas besoin de maintenir les ratios(dans le cas contraire, nous devons utiliser le overflow:aucun);

b) remplir un div, pas de l'ensemble de fond;

c) ce serait un plus pour être responsable. Maintenant, il est tant que vous re-taille de la fenêtre en diagonale. En gardant de la hauteur et de re-dimensionnement de l'horizontale coupe la vidéo.

J'ai essayé des dizaines, voire des centaines d'alternative et de garder la vidéo initiale ratio.

il fonctionne dans le fidlle .... peut-être parce que l'écran est petit, peut-être parce que le violon est un meilleur navigateur...

<body>
<div class="wrapper">
    <div class="header">
     .....
    </div>
    <div class="out-video">
        <video autoplay loop poster="mel.jpg" id="bgvid" width="100%" height="100%">
            <source src="http://www.mysite.braaasil.com/video/mel.webm" type="video/webm">
            <source src="http://www.mysite.braaasil.com/video/mel.mp4" type="video/mp4">
        </video>
     </div>
</div>

Le site est ici, mais comme je l'ai essayer les solutions, il va changer... Il y a un droit et gauche de la barre latérale vide. Je voudrais la vidéo pour remplir toute la largeur. Quand il recouvre la div, le changement de la hauteur et la vidéo ne montre pas en entier. Je voudrais quelque chose comme le fond de taille 100% 100% qui s'étend sur les images à la fin de la div, mais il ne fonctionne pas pour la vidéo.

Merci pour toute suggestion à l'avance.

PS. Il semble que android la famille ne joue pas la vidéo!

l

Le webm version semble être manquant. Peut-être vous avez besoin de définir des autorisations pour ce format sur votre serveur. Ce n'est pas exactement clair ce que vos exigences sont, bien.
Le lien donne une erreur 404. Cela peut être parce que le serveur n'est pas configuré pour autoriser ce type de fichier, vous pouvez facilement le fixer avec une ligne dans votre .fichier htaccess.

OriginalL'auteur user2060451 | 2014-04-04

  1. 9

    Vous pouvez utiliser une solution comme cette une. Le Ratio de ne pas changer, mais vous pouvez perdu la partie droite de la vidéo.

    video#bgvid {
    position: absolute;
    z-index: 0;
    background: url(mel.jpg) no-repeat;
    background-size: 100% 100%;
    top: 0px;
    left: 0px; /* fixed to left. Replace it by right if you want.*/
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

    La vidéo sera fix de coin en haut à gauche. Si vous voulez l'améliorer, je pense que vous aurez besoin d'un peu de JavaScript.

    Edit :

    Juste trouver une solution avec JQuery qui peut s'adapter à votre besoin : simuler background-size:cover sur <video> ou <img>

    Démo

    Je vous remercie. Jquery est la solution qui semble ajouter l'en-tête à la fenêtre, donc il y aura une barre de défilement, ce qui est acceptable. J'essayais de ne pas avoir de barre de défilement, complète en bas de la div (width:100% et la hauteur:85% de la fenêtre d'affichage). Le problème est que la vidéo n'est pas élastique comme image... il écrase !important.... et tout le reste. il est facile d'avoir la vidéo complète avec vide panneaux latéraux, plein de div avec la barre de défilement ou de masquer le dépassement de capacité. Modifier les proportions de la vidéo à remplir div et avez une vidéo complète est quelque chose.
    Cela a fonctionné pour moi, merci!
    Ohhhh..je l'aime

    OriginalL'auteur aloisdg

  2. 6

    Utilisation object-fit propriété css, mais il n'y a pas de support pour IE, mais c'est encore assez raisonnable pour être utilisé pour <video>, <img> balises.

    Vérifier CanIUse pour la prise en charge du Navigateur, et CSS-Tricks pour l'utilisation.

    OriginalL'auteur Subroto