Question

我播放全屏视频作为背景。我按照这个伟大的指南：http://epicwebsites.com/html5-video-scale-to-fill-container-with-jquery 使用jQuery获取视频标记的比例缩放。

一切都很好。

除了缩放似乎不是从视频的中心（枢轴）发生，而是从左上角发生。换句话说 - 视频的裁剪仅来自右侧，这使视频焦点不在其中心。

有什么方法可以解决这个问题？ 我需要始终保持视频集中。

以下是我用于视频的CSS：

    #fullscreen_video
{
    opacity: .2;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -1000;
}

Answer 1

您可以使用jQuery通过更改top和left属性来居中视频。

$(window).resize(function () {
    var $vid = $('#fullscreen_video');
    $vid.css({
        left: ($(window).width() - $vid.width()) / 2,
        top: ($(window).height() - $vid.height()) / 2
    });
});

扩展HTML5视频并维护中心？

1 个答案: