10
votes

Vidéo de fond plein écran et conservez-le centré

J'essaie de créer un site où j'ai une vidéo de fond en cours de lecture avec certains HTML5. Tout cela fonctionne parfaitement, cela fonctionne comme je le veux. Mais je veux aussi garder l'image centrée sur l'écran, même lorsqu'un utilisateur redimensionne le navigateur.

function resizeHandler() {
        // scale the video
        var documentHeight = $(document).height();
        var documentWidth = $(document).width();
        var ratio = $('#video').width() / $('#video').height();

        if((documentWidth / documentHeight) < ratio) {
            $('#video').css({
                'width': 'auto',
                'height': '100%',
                'left': '0px',
                'right': '0px',
                'top': '0px',
                'bottom': '0px'
            })

            var marginRight = $('#video').width() - $(document).width();
            $('#video').css('left', -marginRight);
        } else {
            $('#video').css({
                'width': '100%',
                'height': 'auto',
                'left': '0px',
                'right': '0px',
                'top': '0px',
                'bottom': '0px'
            })

            var marginTop = $('#video').height() - $(document).height();
            $('#video').css('top', -marginTop);
        }
    }


4 commentaires

Y a-t-il une raison fonctionnelle pour laquelle vous vous souciez de la réaliser dans CSS? Si cela fonctionne, cela fonctionne.


Pas vraiment, je suis juste curieux que ce soit possible ou non dans CSS, juste la curiosité.


Est-ce que cela centrait votre vidéo sur une taille de navigateur?


La meilleure façon de réaliser cela avec CSS est avec la propriété d'objet. Cela fonctionne dans tous les navigateurs pour la vidéo, à l'exception de IE et Edge. Vous pouvez le remettre sur le forum Microsoft Developer ici: wpdev.userservir.com/forums/257854-microsoft-ege-developer/.../a> Vous pouvez utiliser un JS Polyfill dans l'intervalle, Mais si cela obtient plus de votes, il sera mis en œuvre


4 Réponses :


1
votes

Ceci devrait faire #video code> toute la taille de la fenêtre de visualisation et rester là-bas lorsque l'utilisateur fait défiler l'utilisateur.

#video {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}


1 commentaires

Merci, mais comment allouera-t-il la vidéo à la fenêtre du navigateur et l'échelle proportionnellement? J'ai déjà utilisé le même code CSS, mais je n'ai pas pu recréer ma jQuery avec CSS



6
votes

Cette question a simplement été référencée dans Placez la vidéo avec 100% de hauteur et à 100% de largeur avec CSS ou JavaScript

Je suppose que ma réponse pour cela pourrait être celle que vous recherchiez? P>

Voici le code:

p>

<header>
    <h1>Sample Title</h1>
	<video autoplay loop class="bg-video">
		<source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4">
	</video>
</header>


0 commentaires

3
votes

J'essaierais de centrer la vidéo avec la position absolue à l'intérieur d'une enveloppe fixe. Donc, par exemple:

Placez votre vidéo à l'intérieur d'une enveloppe fixe à 100% de largeur et de hauteur: strong> p> xxx pré>

Centre la vidéo à l'intérieur d'une superficie supplémentaire avec voiture de marge: forte> p> xxx pré>

et étirer en taille réelle avec min-largeur et min-hauteur: forte > p> xxx pré>


ici le résultat final: strong> p>

p>

<div id="video-wrap">
    <video id="video" loop autoplay>
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</div>


0 commentaires

0
votes

Utilisez la propriété CSS. Objet-Fit: Couverture;

p>

<video controls> 
  <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>


0 commentaires