vuefilemanager/resources/js/components/FilePreview/Media/Video.vue

<template>
    <div class="video-wrapper">
        <video
            :src="file.data.attributes.file_url"
            class="video"
            :class="{ 'file-shadow': !$isMobile() }"
            controlsList="nodownload"
            disablePictureInPicture
            playsinline
            controls
            autoplay
        />
    </div>
</template>

<script>
export default {
    name: 'Video',
    props: ['file'],
}
</script>

<style lang="scss" scoped>
@import '../../../../sass/vuefilemanager/variables';

.video-wrapper {
    max-width: 1080px;
    max-height: 100%;

    @media (min-width: 1200px) {
        & {
            max-width: 800px;
        }
    }

    @media (min-width: 1920px) and (max-width: 2560px) {
        & {
            max-width: 1080px;
        }
    }
    @media (min-width: 2560px) and (max-width: 3840px) {
        & {
            max-width: 1440px;
        }
    }
    @media (min-width: 3840px) {
        & {
            max-width: 2160px;
        }
    }

    .video {
        max-width: 100%;
        max-height: 100%;
        align-self: center;
    }
}
</style>