触发onload并一起调整大小？

Question

我有一个视频元素，其位置由浏览器的宽度和高度决定。它包裹在下面的resize()函数中。基本上，当我调整浏览器的大小时，位置会发生变化，以便浏览器专注于视频的中心。

我试图让这个功能立即运行时，页面加载和当浏览器大小。无论负载和调整工作，当我跑我的网页在本地，但实时推送时，该功能将无法负载启动，但是当我调整将仅..

它也非常不一致。有时候这个函数会在加载时触发，有时它不会。

var resize = function(){ 
    var videoWidth = (window.innerWidth - video.offsetWidth)/2; 
    var videoHeight = (window.innerHeight - video.offsetHeight)/2; 
    video.style.transform = "translateY(" + videoHeight + "px)"; 
    video.style.transform = "translateX(" + videoWidth + "px)"; 
} 

window.addEventListener("load", function(){ 
    resize(); 
}); 

window.addEventListener("resize", function(){ 
    resize(); 
}); 

Answer 1

我建议你两种不同的方式来实现，没有JavaScript。

1.第一溶液（无边缘处的阴影）

HTML

<div id="videoWrapper"> 
    <video ... ></video> 
</div> 

CSS

#videoWrapper { 
    position: relative; 
    width: 100%; 
} 

#videoWrapper video { 
    position: absolute; 
    left: 50%; 
    transfrom: translateX(-50%); 
} 

您的视频可以改变其高度或宽度，它将始终以包装为中心！ ：d

1.第二溶液（用边缘处的阴影）

HTML

<div id="videoWrapper"> 
    <div class="shadowBlock"> 
    </div> 
    <div id="video"> 
    </div> 
    <div class="shadowBlock"> 
    </div> 
</div> 

CSS

#videoWrapper { 
    display: flex; 
    flex-direction: row 
} 

.shadowBlock { 
    z-index: 5; 
    display: flex; 
    background-color: black; 
    flex: 1; 
    -webkit-box-shadow: 0px 0px 100px 24px rgba(0,0,0,0.75); 
    -moz-box-shadow: 0px 0px 100px 24px rgba(0,0,0,0.75); 
    box-shadow: 0px 0px 100px 24px rgba(0,0,0,0.75); 
} 

#video { 
    z-index: 4; 
    display: flex; 
} 

在这里你可以看到它的工作好：https://jsfiddle.net/et2xrsj5/