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 Réponses :
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;
}
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
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>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> Centre la vidéo à l'intérieur d'une superficie supplémentaire avec voiture de marge: forte> p> et étirer en taille réelle avec min-largeur et min-hauteur: forte > 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>
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>
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