Здравствуйте!

Такая проблема: Есть сайт где на фоне сверху лежит видео, сразу под ним лежит картинка, которая является продолжением видео, имеет такую же изначальную ширину (1920) и должна совпадать с видео пиксель в пиксель, чтоб не было понятно, где оно заканчивается и начинается статическая картинка. Ещё нужно, чтоб они не сужались при уменьшении окна, а центрировались (на видео в центре есть объект, который всегда должен оставаться в центре). Этого достигнуть я пытаюсь с помощью "object-fit: cover" на <video> и на <img> и все хорошо пока ширина окна не начинает превышать 1920рх , тогда они начинают увеличиваться не пропорционально и видео начинает перекрывать картинку. Как бы сделать так чтоб они вели себя синхронно при любом ресайзе (хотя бы до 3000px) и вообще возможно ли это?

И ещё, можно ли это осуществить с помощью bsckground-image вместо тэга img? Пробовал задавать фоновой картинке background-size: cover, но резайзится она всё равно не синхронно с видео, на котором object-fit: cover.

http://codepen.io/foxer1/pen/XKNaRe

Заранее спасибо!