Question

我正在尝试使我的视频居中定位，而不会使用哪种屏幕。我有css来确保视频根据比率的变化完全覆盖屏幕，而不是试图让css左移以使视频始终居中。

HTML

div class="heroWrapper"
  video autoplay muted loop class="videojsfix" id="myVideo"
    source src="/video/crystal.mp4" type="video/mp4"
  video
div

JS：

var windowSize = window.innerWidth;
var VideoWidth = document.getElementById ("myVideo").offsetWidth;
var difference = windowSize-VideoWidth;
var video = document.getElementById ("myVideo") ;
var moveDifference = ((difference)/2);

    if( VideoWidth > windowSize){
        $(".videojsfix").css({
        left: 'moveDifference'
    }); };

这个想法是，它可以测量视频的重叠部分，然后将其除以2。然后给出我需要添加到左侧css的视频中以将其移动到屏幕中央的数字。

有人可以说为什么这不起作用吗？

Answer 1

请检查您是否正在使用正确的CSS。

if( VideoWidth > windowSize){
    $(".videojsfix").css({
    left: 'moveDifference'
}); };

if( VideoWidth > windowSize){
    $(".videojsfix").css({
    left: 'moveDifference'+ 'px';
}); };

JS背景视频调整中心

1 个答案: