<!-- Modal structure -->
<div id="videoModal" class="modalvideo">
<div class="modal-contentvideo">
<div class="modal-headervideo">
<!-- Close Button -->
<span class="closevideo" onclick="closeVideoModal()">&times;</span>

<!-- Download Button (Font Awesome) -->
<a href="javascript:void(0);" class="download-icon" onclick="downloadVideo()">
<i class="fas fa-download"></i> <!-- Font Awesome download icon -->
</a><b style="text-align: center;">ChaTLoLo.wapka.co</b>
</div>
<video id="my-video" class="video2" height="400px" width="100%" controls preload="metadata">
<source id="videoSource" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>

<script>
// Function to open the video modal and play the given video source URL and poster image
function openVideoModal(videoUrl, posterUrl) {
// Set the video source and poster
document.getElementById('videoSource').src = videoUrl;
document.getElementById('my-video').poster = posterUrl;

// Load and play the video
var videoPlayer = document.getElementById('my-video');
videoPlayer.load(); // Load the new video source
videoPlayer.play(); // Start playing the video immediately

// Display the modal
document.getElementById('videoModal').style.display = 'block';
}

// Function to close the video modal
function closeVideoModal() {
// Hide the modal
document.getElementById('videoModal').style.display = 'none';

// Pause the video when closing the modal
var videoPlayer = document.getElementById('my-video');
videoPlayer.pause();
}

// Close modal if clicked outside the modal content
window.onclick = function(event) {
var modal = document.getElementById('videoModal');
if (event.target === modal) {
closeVideoModal();
}
};

// Function to handle downloading the video in a new tab
function downloadVideo() {
const videoUrl = document.getElementById('videoSource').src;

// Open the video in a new tab for downloading
window.open(videoUrl, '_blank'); // '_blank' opens the URL in a new tab
}

</script>

<!-- Include Font Awesome CDN (if not already included) -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<style>
/* Modal styles */
.modalvideo {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 999998; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
background-color: rgba(0, 0, 0, 0.4); /* Black with opacity */
overflow: auto; /* Enable scrolling if needed */
}

.modal-contentvideo {
background-color: #fff;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be adjusted */
max-width: 800px; /* Max width for the video container */
text-align: center;
}

.modal-headervideo {
display: flex;
justify-content: space-between; /* Positions the close button and download icon on opposite sides */
align-items: center;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}

.closevideo {
color: #fff; /* White color for visibility */
font-size: 36px; /* Larger font size */
font-weight: bold;
cursor: pointer;
position: absolute; /* Positioning it at the top-right corner */
top: 10px;
right: 25px;
}

.closevideo:hover,
.closevideo:focus {
color: black;
text-decoration: none;
}

/* Download icon styles */
.download-icon {
font-size: 20px;
color: #333;
text-decoration: none;
}

.download-icon:hover {
color: #45a049; /* Change color on hover */
}

.download-icon i {
font-size: 18px;
}

/* Video styles */
.video2 {
width: 100%;
max-height: 450px;
}

/* Responsive styles */
@media (max-width: 768px) {
.modal-contentvideo {
width: 90%; /* Reduce modal width on smaller screens */
}
}

@media (max-width: 480px) {
.modal-contentvideo {
width: 95%; /* Further reduce modal width on very small screens */
}
}
</style>