HTML5 inline video ignores z-index

I have an inline HTML5 video that's ignoring z-index and is being displayed over a higher positioned element. I've tried all the solutions and advice I could find, like explicitly positioning the elements and setting z-index, but to no avail.

The simplified structure goes like so:

<div class="content">
 <div class="row 1">
  <bunch of other divs>
   <div class="product_socials_wrapper">
    links
   </div>
  </bunch of other divs>
 </div>
 <div class="row 2">
  <bunch of other divs>
   <video>
   </video>
  </bunch of other divs>
 </div>
</div>

.product_socials_wrapper {
 position: fixed;
 z-index: 999;
}
.row2 .column .column-inner {
 z-index: 1;
}

The .product_socials_wrapper div is always displayed floating on the left above all other elements, except the <video> one. It has no problem floating above even the video's immediate parent wrapper. This is only visible at widths where the <video> is close enough to the left to overlap with the .product_socials_wrapper div, like 1300px wide. Moreover, if I replace the video with, say, an image, without changing any other code, the problem disappears. So my guess it's not a stacking mistake in the code.

You can see this in Chrome and Firefox here. This is a live site built with WordPress and WPBakery Page Builder. The .product_socials_wrapper is part of the theme, so I don't have much control over its HTML. The <video> tag is inserted manually into WPBakery builder via its 'raw code' widget, so I can tinker with it at will, as well as with CSS, albeit to no avail so far.

Any pointers in the right direction greatly appreciated.

Solution

.vc_row.vc_row-flex > .vc_column_container > .vc_column-inner {
    z-index: 0;
}

This fixes the overlap problem. My guess is that the fixed position of the social buttons takes it out of the normal stacking context, so z-index wasn't working like you expected. It's hard to tell because I'm sure the CMS you're using auto-generates HTML and CSS for certain things.