@using BLAIzor.Models
<style>
    .parent-element-to-video {
    overflow: hidden;
    width: 120vw;
    height: auto;
    }

    #myVideo {
    position: fixed;
    right: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(calc((100% - 100vw) / 2));
    }
</style>

<div class="parent-element-to-video">
    <video style="opacity:0.3; z-index: -1" autoplay muted loop id="myVideo" @key="site.BackgroundVideo">
        <source src="@(site.BackgroundVideo)" type="video/mp4">
    </video>
</div>

<script>
    $(document).ready(function () {
    var video = document.getElementById("myVideo");
    console.log(video);
    video.oncanplaythrough = function () {
    video.muted = true;
    video.play();
    };
    });
</script>

@code {
    [Parameter]
    public SiteInfo site { get; set; } = new SiteInfo();
}