Background Video with fitting image overlay - how?

Design help General
1

Hello there everyone!

We like to use a background video “inside” an image overlay, which should overall look like a smartphone mockup playing an video in loop.
But we can’t figure out, how to place the two elements, background video and image as overlay, so that it fits.

As you can see, the corners of the video go beyond the picture (transparent iphone case).

What changes need to be made so that it ends up looking something like in the examples below?

Here is my link to the project (read only)

All help appreciated and thank you very much for your time!

Screenshot of the “Challenge” at the moment :point_down:

Screenshot 2022-04-20 at 11.18.16
Screenshot 2022-04-20 at 11.18.16646×1276 446 KB

Screenshot for the desired end result :point_down:

Screenshot 2022-04-20 at 11.20.45
Screenshot 2022-04-20 at 11.20.45516×1020 521 KB

2

Hello @NikolaiWeidner, so basically what you have to do, well there are many ways to achieve this, but the easiest one in my opinion is by having a div block inside a div block, so have a parent div styled as an iPhone, then another div, a child div, place inside where you apply the bg video, if your video gets out of the parent div, just apply overflow hidden to the parent div. I hope this helps.