使div覆盖与视频div完全匹配

<style>
    .video-container {
        position: relative;
        z-index: -1;
    }
    
    .overlay {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5); /* 设置覆盖div的背景颜色和透明度 */
    }
</style>

<div class="video-container">
    <video src="video.mp4" controls></video>
    <div class="overlay"></div>
</div>

<style>
    .video-container {
        position: relative;
    }
    
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5); /* 设置覆盖div的背景颜色和透明度 */
    }
</style>

<div class="video-container">
    <video id="video" src="video.mp4" controls></video>
    <div class="overlay"></div>
</div>

<script>
    window.addEventListener('DOMContentLoaded', function() {
        var video = document.getElementById('video');
        var overlay = document.querySelector('.overlay');
        
        video.addEventListener('loadedmetadata', function() {
            overlay.style.width = video.offsetWidth + 'px';
            overlay.style.height = video.offsetHeight + 'px';
        });
    });
</script>