Zoom in effect of video in the background, in a video slightly in advance a

[HiLem]

Hello,

I begin and I would like to reproduce this kind of effect on my personal page of a small site some Zoom in effect of video in the background, in a video slightly in advance and inscribed in a circle...

you can see the desired effect on the introductory page of this japanese site https://monopo.co.jp

My questions are as follows, how to reproduce the zoom at the right scale between the two videos and inscribed in a circle with the same size/format with the black around like in circle4.mp4 exemple.


I have the structure that works well, the black box circle4.mp4 is not really necessary because the video is displayed well in my circle but I can not reproduce this interesting zoom effect ... (screenshot from mine http://www.noelshack.com/2018-31-1-1532984243-capture-d-ecran-2018-07-30-a-22-56-28.png)



here you can have a look directly on the two videos of the original site are:
https://monopo.co.jp/wp-content/themes/monopo/video/bg2.mp4
https://monopo.co.jp/wp-content/themes/monopo/video/circle4.mp4


Someone would be kind enough to enlighten me how to do this effect on the video circle4.mp4? A big thank you in advance!

[poisondeathray]

Hello,

I begin and I would like to reproduce this kind of effect on my personal page of a small site some Zoom in effect of video in the background, in a video slightly in advance and inscribed in a circle...

you can see the desired effect on the introductory page of this japanese site https://monopo.co.jp

My questions are as follows, how to reproduce the zoom at the right scale between the two videos and inscribed in a circle with the same size/format with the black around like in circle4.mp4 exemple.


I have the structure that works well, the black box circle4.mp4 is not really necessary because the video is displayed well in my circle but I can not reproduce this interesting zoom effect ... (screenshot from mine http://www.noelshack.com/2018-31-1-1532984243-capture-d-ecran-2018-07-30-a-22-56-28.png)



here you can have a look directly on the two videos of the original site are:
https://monopo.co.jp/wp-content/themes/monopo/video/bg2.mp4
https://monopo.co.jp/wp-content/themes/monopo/video/circle4.mp4


Someone would be kind enough to enlighten me how to do this effect on the video circle4.mp4? A big thank you in advance!

The exact zoom level doesn't really matter, does it ? You can just customize it a bit larger or smaller . But the answer is the BG is scaled down to 96% to make up the circle cut out (you can take a screenshot and measure this in a video editor or compositing program)


They use 2 separate videos are played simultaneously on the HTML5 canvas interactively . You can actually pause one or both at different times, so you can completely change the timing with respect to each video

The smaller circle video uses an alpha channel mask workaround for the overlay (that's why you see it as a "circle" , not a circle with black borders making up the square). But it does not have an embedded alpha channel in the video (If you used webm, you could use alpha channel directly in the video but lower compatibility with older browsers). In that example it was 1920x1080 for the BG , 700x700 for the circle overlay. The overlay video also has levels , color adjusted, and the videos have slight other differences as well.


The black box circle video is necessary if you want it interactive like their site. But if you just wanted a single video, then you would composite the circle video with alpha channel, and encode it like that. The timing woudl be fixed too, so if you wanted it 1 frame earlier or later it would be "hardcoded" into the video. The viewer would use lose the interactivity or ability to change timing