Question

我想制作一个全屏视频响应式目标网页。我有一个居中的视频（1920x1080）。但是当我调整窗口大小时，它没有正确调整大小。只有Javascript解决方案。

示例应如何显示：http://www.welcometofillory.com/ 我感谢任何帮助。

到目前为止的Javascript：

var $vid = $('.full-screen-video');

    updateSize();
    $(window).resize(function() {
        updateSize();
    });

    function updateSize() {

        var $eWidth = window.innerWidth;

        var $AspectRatio = 1080 / 1920;

        var $newHeight = $eWidth * $AspectRatio;

        $vid.css({"width": $eWidth, "height": $newHeight});


    };

Answer 1

您的代码是真的。使用控制台查看过程：

struct Node {}

protocol NodeSolver {
    static func solve(_ nodes: [Node]) -> [Node]
}

struct NodeSolverA: NodeSolver {
    static func solve(_ nodes: [Node]) -> [Node] {
        return nodes
    }
}

struct NodeSolverB: NodeSolver {
    static func solve(_ nodes: [Node]) -> [Node] {
        return nodes.reversed()
    }
}

// instead of a generic function, wrap a concrete function
// in a generic type
struct AnyNodeSolver<T: NodeSolver> {
    static func findPath(nodes: [Node]) -> [Node]  {
        return T.solve(nodes)
    }
}

let myNodes = [Node(), Node()]

let dummyPathA = AnyNodeSolver<NodeSolverA>.findPath(nodes: myNodes)
let dummyPathB = AnyNodeSolver<NodeSolverB>.findPath(nodes: myNodes)

你可以测试这个css规则：

function updateSize() {

    var $eWidth = window.innerWidth;

    var $AspectRatio = 1080 / 1920;

    var $newHeight = $eWidth * $AspectRatio;

    console.log('eWidth: ' + eWidth);
    console.log('newHeight: ' + newHeight); 

    $vid.css({"width": $eWidth, "height": $newHeight});

    console.log('real width' + $('.full-screen-video').width());
    console.log('real height' + $('.full-screen-video').height());
};

Answer 2

仅使用css：

<div class="fullsize-container">
    <video autoplay id="landing-video" class="full-screen-video" width="100%" height="100%" preload="auto" loop="loop">
        <source src="assets/landing-video.mp4" type="video/mp4">
    </video>
</div>

.fullsize-container {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.full-screen-video {
    width: 1920px;
    height: 1080px;
    max-width: 1920px;
    max-height: 1080px;
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

Javascript响应视频高度/宽度

2 个答案: