javascript - js后台视频调整中心

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';
}); };