https://www.mptourism.com/js/video-section.js?id=27052026

1/**
2 * Video Section JavaScript
3 * Handles video playlist, modal, and YouTube video playback
4 */
5
6jQuery(function ($) {
7
8    // -------------------------------------------------------
9    // Init: Set data-video-id on container from the img tag
10    // (Fix Bug 1 & 2: main thumb video id not on container)
11    // -------------------------------------------------------
12    var initialVideoId = $('#mainVideoContainer').find('.main-video-thumb').data('video-id');
13    if (initialVideoId) {
14        $('#mainVideoContainer').attr('data-video-id', initialVideoId);
15    }
16
17    // -------------------------------------------------------
18    // Playlist Item Click Handler
19    // -------------------------------------------------------
20    $('.playlist-item').on('click', function() {
21        // Remove active class from all items
22        $('.playlist-item').removeClass('active');
23        // Add active class to clicked item
24        $(this).addClass('active');
25
26        // Get video data
27        var videoId    = $(this).data('video-id');
28        var videoTitle = $(this).data('video-title');
29        var videoThumb = $(this).find('.playlist-thumb img').attr('src');
30
31        // Update main video player
32        $('#mainVideoContainer').find('.main-video-thumb').attr('src', videoThumb);
33        $('#mainVideoContainer').attr('data-video-id', videoId);
34        $('.main-video-title').text(videoTitle);
35    });
36
37    // -------------------------------------------------------
38    // Function to stop video and clear modal
39    // -------------------------------------------------------
40    function stopVideoAndCloseModal() {
41        var iframe = $('.youtube-modal-area iframe');
42        if (iframe.length > 0) {
43            iframe.attr('src', '');
44        }
45        $('.youtube-modal-area').html('');
46    }
47
48    // -------------------------------------------------------
49    // Open Modal on Main Video Container Click
50    // (Fix Bug 3: use pointer-events & touch on whole container)
51    // -------------------------------------------------------
52    $('#mainVideoContainer').on('click touchend', function(e) {
53        e.preventDefault();
54        e.stopPropagation();
55
56        var videoId = $(this).attr('data-video-id');
57        if (!videoId) return;
58
59        var embeded_code = '<iframe width="100%" height="100%" ' +
60            'src="https://www.youtube.com/embed/' + videoId +
61            '?autoplay=1&rel=0" frameborder="0" ' +
62            'allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" ' +
63            'allowfullscreen></iframe>';
64
65        $('.youtube-modal-area').html(embeded_code);
66        $('#videoModal').modal('show');
67    });
68
69    // -------------------------------------------------------
70    // Stop video when modal closes
71    // -------------------------------------------------------
72    $('#videoModal').on('hidden.bs.modal', function () {
73        stopVideoAndCloseModal();
74    });
75
76    $('#videoModal').on('hide.bs.modal', function () {
77        stopVideoAndCloseModal();
78    });
79
80    $('.close-youtube').on('click', function() {
81        stopVideoAndCloseModal();
82    });
83
84    // Stop video when clicking on backdrop
85    $(document).on('click touchend', '#videoModal', function(e) {
86        if (e.target === this) {
87            stopVideoAndCloseModal();
88        }
89    });
90});