How to add embedded code (video) in a coloured div block and centre it?

I am trying to get this design, where I have a embedded code (video) and there are designs on top and bot (blue div).

I did this in my “feature” & “aboutUs” page but I feel like its messy and there is a better way to do it.

Any help is appreciated.
I am trying to do this in Mobile version as well.


my read only link below

I would do the following:

  1. make a div call it wrapper, position: relative
  2. put video inside
  3. put blue block inside, size how you like it, make it position: absolute and position it accordingly.

I understand it’s not very specific but essentially I would use position: absolute on the decoration box. Let me know if you need more help.

Thanks @learyjk .
The issue I am having with absolute is, it gets fixed after positioning and when I shift to different screen size, it gets messed up.

This is my current settings:
display: block element
height: 380px

display: block element
& positioning it with changing margin to make it center.

If I change anything to flex to center it, the video disappears.

It works on the 27in screen, but when I shift it 13in Macbook. the margin goes has issues.