<div class="content-section">
    <h2 class="content-title">
        <span uk-icon="icon: video-camera; ratio: 1" class="uk-icon"></span>
        <span>Introduction Video</span>
    </h2>
    <div class="content-description">
        <div class="introduction-video">
            <video id="introVideo"
                src="assets/videos/introduction.mp4"
                width="1800"
                height="1200"
                loop
                muted
                playsinline>
            </video>

            <!-- Play button overlay -->
            <div class="video-overlay" id="videoOverlay"></div>
            <button class="play-button" id="playButton" uk-tooltip="Play Video">
                <span uk-icon="icon: play; ratio: 1.4"></span>
            </button>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const video = document.getElementById('introVideo');
        const playButton = document.getElementById('playButton');
        const videoOverlay = document.getElementById('videoOverlay');

        // Play video when play button or overlay is clicked
        function playVideo() {
            video.muted = false; // Unmute the video
            video.play();
            playButton.style.display = 'none';
            videoOverlay.style.display = 'none';
            video.setAttribute('controls', 'controls');
        }

        // Reset when video ends
        function resetVideo() {
            playButton.style.display = 'block';
            videoOverlay.style.display = 'block';
            video.removeAttribute('controls');
        }

        // Event listeners
        playButton.addEventListener('click', playVideo);
        videoOverlay.addEventListener('click', playVideo);

        // Show play button again when video ends (optional)
        video.addEventListener('ended', resetVideo);

        // If you want to pause and show play button again when video is paused
        video.addEventListener('pause', function() {
            if (!video.ended) {
                playButton.style.display = 'block';
                videoOverlay.style.display = 'block';
            }
        });
    });
</script>