×
Explanation: videoThumbnail: Displays a thumbnail image representing the video. videoModal: Contains the lightbox modal that opens when the thumbnail is clicked. modal-content: Wraps the video player and close button inside the modal. close-btn: Closes the modal when clicked. videoPlayer: The actual video player displayed inside the modal. Styling the Lightbox Modal To create a smooth and visually appealing experience, we need to style the modal. The modal should cover the screen and center the video player, while ensuring that the video is responsive and the background dimmed to highlight the modal. CSS for Lightbox Modal /* Modal Styles */
.modal {
display: none; /* Hidden by default */
position: fixed;
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
overflow: auto; /* Enable scroll if needed */
padding-top: 60px; /* Position the modal content */
}
/* Modal Content */
.modal-content {
margin: auto;
padding: 20px;
background-color: #fff;
width: 80%;
max-width: 900px;
position: relative;
}
/* Close Button */
.close-btn {
position: absolute;
top: 10px;
right: 25px;
color: #f1f1f1;
font-size: 35px;
font-weight: bold;
cursor: pointer;
}
.close-btn:hover,
.close-btn:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
Explanation: .modal: Defines the full-screen dark overlay for the modal; hidden by default. .modal-content: Styles the centered white box inside the modal with padding and max width. .close-btn: Positions and styles the modal’s close button in the top-right corner. .close-btn:hover, .close-btn:focus: Changes the close button color on hover/focus for interactivity. JavaScript to Open and Close the Modal Using JavaScript, we can add functionality to show and hide the modal when the user clicks the thumbnail and the close button. Additionally, we will ensure that the video pauses when the modal is closed to avoid it continuing to play in the background. JavaScript for Opening and Closing the Modal // Get the modal and video elements
const modal = document.getElementById('videoModal');
const videoPlayer = document.getElementById('videoPlayer');
const thumbnail = document.getElementById('videoThumbnail');
const closeBtn = document.getElementsByClassName('close-btn')[0];
// When the user clicks the thumbnail, open the modal
thumbnail.onclick = function() {
modal.style.display = 'block';
videoPlayer.play(); // Auto-play the video when the modal is shown
};
// When the user clicks on the close button, close the modal
closeBtn.onclick = function() {
modal.style.display = 'none';
videoPlayer.pause(); // Pause the video when the modal is closed
videoPlayer.currentTime = 0; // Reset the video to the start
};
// When the user clicks outside the modal content, close the modal
window.onclick = function(event) {
if (event.target === modal) {
modal.style.display = 'none';
videoPlayer.pause();
videoPlayer.currentTime = 0;
}
};
Explanation: modal: References the modal container that holds the video. videoPlayer: References the video element inside the modal. thumbnail: References the video thumbnail image that triggers the modal. closeBtn: References the modal’s close button. thumbnail.onclick: Opens the modal and starts playing the video when the thumbnail is clicked. closeBtn.onclick: Closes the modal, pauses the video, and resets playback to the beginning. window.onclick: Closes the modal if the user clicks outside the modal content, and resets the video. Enhancing User Experience with Keyboard Accessibility Adding keyboard accessibility ensures that users who rely on the keyboard for navigation can easily interact with the video modal. For this, we will add keyboard event listeners to allow users to open the modal with the Enter key and close it with the Escape key. JavaScript for Keyboard Accessibility // Open the modal when 'Enter' is pressed on the thumbnail
thumbnail.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
modal.style.display = 'block';
videoPlayer.play();
}
});
// Close the modal when 'Escape' key is pressed
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape' && modal.style.display === 'block') {
modal.style.display = 'none';
videoPlayer.pause();
videoPlayer.currentTime = 0;
}
});
Explanation: thumbnail.addEventListener('keydown'): Listens for key presses on the video thumbnail. event.key === 'Enter': Opens the modal and plays the video when Enter is pressed. document.addEventListener('keydown'): Listens for key presses on the whole page. event.key === 'Escape': Closes the modal and resets the video when Escape is pressed. Optimizing for Mobile Devices To enhance the user experience on mobile devices, ensure that the modal is responsive and that the video scales properly on smaller screens. CSS for Mobile Optimization /* Responsive Modal */
@media screen and (max-width: 600px) {
.modal-content {
width: 95%;
max-width: none;
}
.close-btn {
font-size: 30px;
}
}
Explanation: @media screen and (max-width: 600px): Applies styles when the screen width is 600px or less. .modal-content: Expands to 95% width on small screens and removes the max-width limit. .close-btn: Reduces the close button size for smaller displays.
Video Hosting
Image Hosting
Galleries
Video Messaging
CincoTube
Pages
Live
