video single catalog

// Shortcode function
function display_video_section() {
    // Get ACF field value
    $video_url = get_field('video_url'); // ACF field for the video URL
    $image_url = 'https://pisti.it/staging/wp-content/uploads/2024/12/image-1.webp'; // Image URL
    $icon_url = 'https://pisti.it/staging/wp-content/uploads/2024/12/fi_142457-1.png'; // Play icon URL

    // HTML structure for the section
    if ($video_url) {
        // If video URL exists, show image with play icon initially
        $output = '<div class="video-section" style="background-image: url(' . esc_url($image_url) . ');">';
        $output .= '<img src="' . esc_url($icon_url) . '" alt="Play Video" class="play-icon" onclick="playVideo()">';
        $output .= '<div class="video-wrapper" style="display:none;">';
        $output .= '<video id="background-video" autoplay muted loop>';
        $output .= '<source src="' . esc_url($video_url) . '" type="video/mp4">';
        $output .= 'Your browser does not support the video tag.';
        $output .= '</video>';
        $output .= '</div>';
        $output .= '</div>';
    } else {
        // If no video URL, show image with icon
        $output = '<div class="image-section" style="background-image: url(' . esc_url($image_url) . ');">';
        $output .= '<img src="' . esc_url($icon_url) . '" alt="Play Video" class="play-icon">';
        $output .= '</div>';
    }

    return $output;
}

// Register the shortcode
add_shortcode('video_section', 'display_video_section');

// Enqueue JavaScript for video playback
function enqueue_video_playback_script() {
    ?>
    <script type="text/javascript">
        function playVideo() {
            var videoWrapper = document.querySelector('.video-wrapper');
            var video = document.getElementById('background-video');
            var icon = document.querySelector('.play-icon');

            // Show the video and hide the icon
            videoWrapper.style.display = 'block';
            icon.style.display = 'none';

            // Play the video
            video.play();
        }
    </script>
    <?php
}
add_action('wp_footer', 'enqueue_video_playback_script');

// Enqueue CSS for styling
function enqueue_video_section_styles() {
    ?>
    <style type="text/css">
        .video-section, .image-section {
            position: relative;
            width: 100%;
            height: 855px; /* Adjust the height as needed */
            overflow: hidden;
        }

        .play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
            z-index: 1; /* Ensure the icon is on top of the video */
        }

        .video-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .background-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
    <?php
}
add_action('wp_head', 'enqueue_video_section_styles');