MediaWiki:Common.js: Difference between revisions
No edit summary |
No edit summary |
||
| Line 58: | Line 58: | ||
}); | }); | ||
/* --- SMART VIDEO MODAL | /* --- SMART VIDEO MODAL (Auto-Inject) --- */ | ||
$ | $(function() { | ||
// 1. | // 1. Check if Modal HTML exists. If not, create it. | ||
if ($('#bc-video-modal').length === 0) { | |||
$('body').append(` | |||
<div id="bc-video-modal" class="bc-modal-overlay"> | |||
<div class="bc-modal-content"> | |||
<div class="bc-modal-close">×</div> | |||
<iframe id="bc-modal-iframe" width="100%" height="100%" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> | |||
</div> | |||
</div> | |||
`); | |||
} | |||
// 2. Setup Triggers (Thumbnail & Click) | |||
$('.bc-video-trigger').each(function() { | $('.bc-video-trigger').each(function() { | ||
var $trigger = $(this); | var $trigger = $(this); | ||
var videoID = $trigger.data('video-id'); | var videoID = $trigger.data('video-id'); | ||
// | // Inject Image Tag if missing | ||
if ( | if ($trigger.find('img').length === 0) { | ||
var thumbUrl = "https://img.youtube.com/vi/" + videoID + "/maxresdefault.jpg"; | var thumbUrl = "https://img.youtube.com/vi/" + videoID + "/maxresdefault.jpg"; | ||
$trigger. | $trigger.prepend('<img src="' + thumbUrl + '" alt="Video Thumbnail">'); | ||
} | } | ||
}); | |||
// 3. Handle Click (Using 'body' delegation to ensure it always catches the click) | |||
$('body').on('click', '.bc-video-trigger', function() { | |||
var videoID = $(this).data('video-id'); | |||
var embedUrl = "https://www.youtube.com/embed/" + videoID + "?autoplay=1&rel=0&modestbranding=1"; | |||
$('#bc-modal-iframe').attr('src', embedUrl); | |||
$('#bc-video-modal').addClass('active'); | |||
$('body').css('overflow', 'hidden'); // Stop background scrolling | |||
}); | }); | ||
// | // 4. Close Logic | ||
function closeModal() { | function closeModal() { | ||
$('#bc-video-modal').removeClass('active'); | $('#bc-video-modal').removeClass('active'); | ||
| Line 90: | Line 102: | ||
} | } | ||
$('.bc-modal-close' | $('body').on('click', '.bc-modal-close', closeModal); | ||
$('#bc-video-modal' | |||
// Close on background click | |||
$('body').on('click', '#bc-video-modal', function(e) { | |||
if (e.target === this) closeModal(); | if (e.target === this) closeModal(); | ||
}); | }); | ||
// Close on Escape Key | |||
$(document).keydown(function(e) { | $(document).keydown(function(e) { | ||
if (e.key === "Escape") closeModal(); | if (e.key === "Escape") closeModal(); | ||
}); | }); | ||
}); | }); | ||