Próbuję utworzyć witrynę, w której mam film w tle odtwarzany przy użyciu HTML5. Wszystko działa idealnie, działa dokładnie tak, jak tego chcę. Ale chcę również, aby obraz był wycentrowany na ekranie, nawet gdy użytkownik zmienia rozmiar przeglądarki.Pełnoekranowe wideo w tle i utrzymywanie w środku
<video id="video" src="video/video.mov" type="video/mov" autoplay loop></video>
Mam to do pracy z jQuery, ale zastanawiałem się, czy istnieje rozwiązanie CSS do tego.
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);
}
}
To jest jQuery, którą napisałem, aby rozciągnąć obraz tak, aby pasował do ekranu i zachować obraz w środku. Nie jestem pewien, czy jest to możliwe w CSS, ale jeśli ktoś wie, może to być miłe.
jest jakiś powód, dla którego funkcjonalny dbają o osiągnięcie tego w css? jeśli to działa, działa. – maxedison
Niezupełnie, jestem po prostu ciekawy, czy to możliwe, czy nie w CSS, tylko ciekawość. –
Czy to centrum wideo w dowolnym rozmiarze przeglądarki? – Jorre