https://aflegal.org/wp-content/themes/america-first-legal/js/homepage-video-modal.js?ver=.1790773877

1/**
2 * Homepage Mission Video Modal Handler
3 * Dedicated modal system for the homepage mission video with dark overlay
4 */
5
6(function($) {
7    'use strict';
8
9    // Homepage video modal HTML structure
10    const homepageModalHTML = `
11        <div id="homepage-video-modal" class="homepage-video-modal">
12            <div class="homepage-video-modal-backdrop"></div>
13            <div class="homepage-video-modal-container">
14                <button class="homepage-video-modal-close" aria-label="Close video">
15                    <i class="fas fa-times"></i>
16                </button>
17                <div class="homepage-video-modal-content">
18                    <!-- Video iframe will be injected here dynamically -->
19                </div>
20            </div>
21        </div>
22    `;
23
24    // Initialize homepage video modal
25    function initHomepageVideoModal() {
26        // Add modal HTML to body if it doesn't exist
27        if (!document.getElementById('homepage-video-modal')) {
28            $('body').append(homepageModalHTML);
29        }
30
31        // Handle homepage mission video player clicks
32        $(document).on('click', '.homepage-mission-video-player', function(e) {
33            e.preventDefault();
34            
35            const videoUrl = $(this).data('video-url');
36            const videoTitle = $(this).data('title') || 'America First Legal Mission Video';
37            
38            if (videoUrl) {
39                openHomepageVideoModal(videoUrl, videoTitle);
40            }
41        });
42
43        // Handle keyboard activation for accessibility
44        $(document).on('keydown', '.homepage-mission-video-player', function(e) {
45            if (e.key === 'Enter' || e.key === ' ') {
46                e.preventDefault();
47                $(this).trigger('click');
48            }
49        });
50
51        // Handle modal close
52        $(document).on('click', '.homepage-video-modal-close, .homepage-video-modal-backdrop', function() {
53            closeHomepageVideoModal();
54        });
55
56        // Handle escape key
57        $(document).on('keydown', function(e) {
58            if (e.key === 'Escape' && $('#homepage-video-modal').hasClass('active')) {
59                closeHomepageVideoModal();
60            }
61        });
62    }
63
64    // Open homepage video modal
65    function openHomepageVideoModal(videoUrl, title) {
66        const modal = $('#homepage-video-modal');
67        
68        // Extract video ID and determine platform
69        let videoId = '';
70        let platform = '';
71        let iframeHTML = '';
72        
73        // Check for YouTube
74        const youtubeMatch = videoUrl.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]+)/);
75        if (youtubeMatch) {
76            videoId = youtubeMatch[1];
77            platform = 'youtube';
78        }
79        
80        // Check for Vimeo (including URLs with hash parameters)
81        const vimeoMatch = videoUrl.match(/vimeo\.com\/(\d+)(?:\/([a-zA-Z0-9]+))?/);
82        if (vimeoMatch) {
83            videoId = vimeoMatch[1];
84            const hash = vimeoMatch[2] || '';
85            platform = 'vimeo';
86        }
87        
88        if (videoId && platform) {
89            // Show modal first
90            modal.addClass('active');
91            $('body').addClass('homepage-modal-open');
92            
93            // Create appropriate iframe based on platform
94            if (platform === 'youtube') {
95                iframeHTML = `
96                    <div class="homepage-video-embed-container">
97                        <iframe id="homepage-video-modal-iframe" 
98                            src="https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1&showinfo=0&controls=1&fs=1&playsinline=1&enablejsapi=1&mute=0"
99                            frameborder="0" 
100                            allow="autoplay; encrypted-media; accelerometer; gyroscope; picture-in-picture" 
101                            allowfullscreen>
102                        </iframe>
103                    </div>
104                `;
105            } else if (platform === 'vimeo') {
106                // Handle Vimeo URLs with optional hash parameter
107                const vimeoMatch = videoUrl.match(/vimeo\.com\/(\d+)(?:\/([a-zA-Z0-9]+))?/);
108                const vimeoId = vimeoMatch[1];
109                const vimeoHash = vimeoMatch[2];
110                const vimeoUrl = vimeoHash ? 
111                    `https://player.vimeo.com/video/${vimeoId}?h=${vimeoHash}&autoplay=1&title=0&byline=0&portrait=0&color=e60e31` :
112                    `https://player.vimeo.com/video/${vimeoId}?autoplay=1&title=0&byline=0&portrait=0&color=e60e31`;
113                

114                iframeHTML = `
115                    <div class="homepage-video-embed-container">
116                        <iframe id="homepage-video-modal-iframe" 
117                            src="${vimeoUrl}"
118                            frameborder="0" 
119                            allow="autoplay; fullscreen; picture-in-picture" 
120                            allowfullscreen>
121                        </iframe>
122                    </div>
123                `;
124            }
125            
126            // Inject iframe into the video content container
127            $('.homepage-video-modal-content').html(iframeHTML);
128            
129            // Focus on close button for accessibility
130            setTimeout(() => {
131                $('.homepage-video-modal-close').focus();
132            }, 100);
133        }
134    }
135
136    // Close homepage video modal
137    function closeHomepageVideoModal() {
138        const modal = $('#homepage-video-modal');
139        
140        // Hide modal
141        modal.removeClass('active');
142        $('body').removeClass('homepage-modal-open');
143        
144        // Clear video content completely to stop video
145        $('.homepage-video-modal-content').empty();
146        
147        // Return focus to trigger element if possible
148        const activeElement = document.activeElement;
149        if (activeElement && activeElement.classList.contains('homepage-video-modal-close')) {
150            // Try to find and focus the original trigger
151            $('.homepage-mission-video-player:first').focus();
152        }
153    }
154
155    // Initialize when document is ready
156    $(document).ready(function() {
157        initHomepageVideoModal();
158    });
159
160})(jQuery);