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

Anamul_Choudhury · September 7, 2022, 12:28pm

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.

Thanks,
Anam

my read only link below
https://preview.webflow.com/preview/paidright-website-6fc00f?utm_medium=preview_link&utm_source=designer&utm_content=paidright-website-6fc00f&preview=5c9c170c4ad8a8081497f44048d3466d&pageId=62af2be71a672ba3e4b7a922&workflow=preview

learyjk · September 7, 2022, 8:49pm

I would do the following:

make a div call it wrapper, position: relative
put video inside
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.

Anamul_Choudhury · September 8, 2022, 1:51am

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:
wrapper
display: block element
height: 380px

video
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.