Am trying to make my materialize carousel a video instead of image, i put the video in a HTML5 video tag, it act normal on mobile and tablet view but the video height is cut in half when it comes to desktop view
<div class="carousel carousel-slider">
<a class="carousel-item" href="">
<video class="" preload="true" autoplay="autoplay" loop="loop" muted
poster="{%static 'sky_squad_home_app/img/sky_squad_video.jpg'%}">
<source src="{%static 'sky_squad_home_app/video/sky_squad_video.mp4'%}" type="video/mp4">
<source src="{%static 'sky_squad_home_app/video/sky_squad_video.webm'%}" type="video/webm">
</video>
</a>
</div>
<script>
const carouselobj = document.querySelector('.carousel');
M.Carousel.init(carouselobj, {
fullWidth: true,
indicators: true
});
</script>