Coded overlay on a color section

I am trying to stick the following chevron effect at the bottom of a color section. It is inspired by the diagonal border option. The issue i am having is two-fold;
– When i try to create a code block and suck it up over-top of the color section with a negative margin i cannot see the chevron despite adding it to my general CSS.
– The code block is not going to 100% width

I’m fine in accomplishing this in any way, but the white needs to lead into the next section so none of the video should appear under the arrow shape that the video will create. Any advice would be greatly appreciated!

http://www.pathfinderuav.ca/wp-content/uploads/2020/10/chevron.jpg

this is the code i used to create the shape;

#chevron {
position: relative;
text-align: center;
padding: 0px;
margin-bottom: 0px;
height: 120px;
width: 100%;
}
#chevron:before {
content: ”;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: white;
transform: skew(0deg, 15deg);
}
#chevron:after {
content: ”;
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: white;
transform: skew(0deg, -15deg);
}