SeemGen/Components/Partials/VideoComponent.razor

40 lines
847 B
Plaintext

@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();
}