VIDEO ELEMENT HOOK

Hello Team,

I am trying to incorporate page hero element for http://cashmerestories.co/?page_id=8

I have -

created a hook element, added this in content section `<video loop muted autoplay poster="http://cashmerestories.co/wp-content/uploads/2020/05/JT-433.jpg" class="background-video">
<source src="http://cashmerestories.co/wp-content/uploads/2020/05/Yilin-Ashwin.mp4" type="video/mp4">
</video>

<div class="background-video-content">
Your Element content in here.
</div>`

Setting is before_header

Added this in css

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

.page-hero {
    position: relative;
    overflow: hidden;
}

.background-video-content {
    position: relative;
    z-index: 1;
}

video[poster] {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

But I am missing or doing something wrong as per the result on page.

Could you pls direct in right direction.

Regards