/* Container holding both the video and overlay */ width: 399px; /* Set the width to 399px */ height: 232px; /* Set the height to 231.83px */ overflow: hidden; /* Hide any overflow content */ /* The video thumbnail container which will hold the image overlay */ background-size: cover; /* Ensure the image fills the container */ cursor: pointer; /* Change cursor to indicate it's clickable */ /* Image overlay that sits on top of the video */ height: 100%; /* Ensure the overlay height matches the container's height */ background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */ background-size: cover; /* Ensure the image fills the overlay */ opacity: 1; /* Overlay is visible by default */ transition: opacity 0.3s ease; /* Smooth transition for overlay fade */ z-index: 2; /* Keep overlay above the video */ /* Video styling (hidden initially) */ width: 100%; /* Video should fill the container width */ height: 100%; /* Video should fill the container height */ object-fit: cover; /* Ensure the video covers the container */ opacity: 0; /* Hide the video by default */ visibility: hidden; /* Hide video from view */ pointer-events: auto; /* Enable interactions with the video */ transition: opacity 0.3s ease; /* Smooth transition when showing/hiding */ /* On hover, show the video and hide the overlay */ opacity: 1; /* Show the video on hover */ visibility: visible; /* Make sure the video is visible */ /* On hover, hide the overlay */ opacity: 0; /* Hide the overlay when hovering over the thumbnail */ // Get all video players and thumbnail containers // Function to play video on hover video.play(); // Play the video // Function to pause video on mouse out video.pause(); // Pause the video video.currentTime = 0; // Reset video to the start // Attach hover events to all video-thumbnail containers // Play the video on hover // Pause the video on mouse out