SeemGen/Components/Partials/VideoComponent.razor

39 lines
843 B
Plaintext

<style>
.parent-element-to-video {
overflow: hidden;
width: 120vw;
height: auto;
}
video {
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="SelectedBrandName">
<source src="@("/video/" + SelectedBrandName + ".mp4")" 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 string SelectedBrandName { get; set; } = "default";
}