стрельба при загрузке и изменении размера вместе?

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/