|
|
| (3 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <includeonly> | | <includeonly> |
| <div class="vanipedia-shorts-widget" style="background: #feffe1; border: 1px solid #1c5249; border-radius: 10px; padding: 10px; width: 280px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start;"> | | <div style="background:#feffe1;padding:10px;border:0px solid #ddd;border-radius:8px;width:300px;"> |
| <div style="width: 100%; display: none;"> | | |
| <!-- Transclude your exact live daily updated list page directly into a hidden memory container -->
| | <!-- Active Player Viewport Container --> |
| <div id=" raw- vanipedia- shorts- database"> | | <div class=" vani- shorts- viewport" style="width:280px; height:225px; overflow:hidden; border- radius:10px; margin:0 auto;"> |
| {{:VanimediaMayapur YouTube SHORTS List}}
| | Loading short... |
| </div> | |
| </div> | | </div> |
| | | |
| <!-- This clean placeholder box renders visually on your site --> | | <!-- FIXED: Wrapped in standard paragraph and layout styles to match your middle card character-for-character --> |
| <div id="vani-active-short-viewport" style="width: 260px; height: 260px; background: #faf9df; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #888;"> | | <div style="padding-top:10px;text-align:center;font-weight:bold;color:#345b63;"> |
| Loading random short... | | <p style="margin:0;padding:0;display:inline;">YouTube Short Selection</p> |
| </div>
| |
| <div id="vani-active-short-title" style="padding-top: 10px; text-align: center; font-weight: bold; color: #345b63; font-size: 13px; line-height: 1.3;">
| |
| </div> | | </div> |
| </div> | | </div> |
|
| |
| <script type="text/javascript">
| |
| // This function runs on your local page DOM after MediaWiki processes the template text
| |
| (function() {
| |
| function processRandomShort() {
| |
| var dbContainer = document.getElementById('raw-vanipedia-shorts-database');
| |
| var viewport = document.getElementById('vani-active-short-viewport');
| |
| var titleDisplay = document.getElementById('vani-active-short-title');
| |
|
| |
| if (!dbContainer || !viewport) return;
| |
|
| |
| // MediaWiki renders a gallery page using a collection of standard list items
| |
| var galleryItems = dbContainer.getElementsByTagName('li');
| |
| if (!galleryItems || galleryItems.length === 0) {
| |
| // Fallback to checking normal links if the gallery structure is stripped out
| |
| galleryItems = dbContainer.getElementsByTagName('a');
| |
| }
| |
|
| |
| if (galleryItems.length === 0) {
| |
| viewport.innerHTML = "No videos detected in list page.";
| |
| return;
| |
| }
| |
|
| |
| // 1. Pick a random item out of the thousands on your list page instantly
| |
| var randomIndex = Math.floor(Math.random() * galleryItems.length);
| |
| var pickedItem = galleryItems[randomIndex];
| |
|
| |
| // 2. Read the absolute raw target text properties of that random row
| |
| var rowText = pickedItem.innerText || pickedItem.textContent || "";
| |
| var htmlContent = pickedItem.innerHTML || "";
| |
|
| |
| var videoId = "";
| |
| var cleanTitle = "YouTube Short";
| |
|
| |
| // 3. Extract the YouTube link ID from the raw attributes
| |
| var matchShort = htmlContent.match(/\/shorts\/([a-zA-Z0-9_-]+)/) || rowText.match(/\/shorts\/([a-zA-Z0-9_-]+)/);
| |
| var matchWatch = htmlContent.match(/v=([a-zA-Z0-9_-]+)/) || rowText.match(/v=([a-zA-Z0-9_-]+)/);
| |
|
| |
| if (matchShort && matchShort[1]) {
| |
| videoId = matchShort[1];
| |
| } else if (matchWatch && matchWatch[1]) {
| |
| videoId = matchWatch[1];
| |
| } else {
| |
| // Fallback parsing pattern if links are formatted in standard string form
| |
| var parts = rowText.split('link=');
| |
| if (parts.length > 1) {
| |
| var urlPart = parts[1].trim().split(' ')[0].split('\n')[0];
| |
| videoId = urlPart.substring(urlPart.lastIndexOf('/') + 1);
| |
| }
| |
| }
| |
|
| |
| // 4. Extract and clean up the clean title label from the list line
| |
| if (rowText.indexOf('|') !== -1) {
| |
| var segments = rowText.split('|');
| |
| if (segments.length > 1 && segments[1].indexOf('link=') === -1) {
| |
| cleanTitle = segments[1].trim();
| |
| } else {
| |
| cleanTitle = segments[0].replace(/File:[^\s|]+/g, '').trim();
| |
| }
| |
| } else {
| |
| cleanTitle = rowText.replace(/File:[^\s|]+/g, '').split('http')[0].replace(/[|]/g, '').trim();
| |
| }
| |
|
| |
| if (!cleanTitle || cleanTitle.length === 0) {
| |
| cleanTitle = "Short Selection";
| |
| }
| |
|
| |
| // 5. Instantly swap the temporary loading block for a clean embedded frame player
| |
| if (videoId) {
| |
| var embedUrl = "https://youtube.com" + videoId;
| |
| viewport.innerHTML = '<iframe width="260" height="260" src="' + embedUrl + '" frameborder="0" allowfullscreen style="border-radius: 8px; border: none;"></iframe>';
| |
| titleDisplay.innerText = cleanTitle;
| |
| } else {
| |
| viewport.innerHTML = '<div style="color:#c0392b; padding:20px; text-align:center;">Unable to decode video element.</div>';
| |
| }
| |
| }
| |
|
| |
| // Initialize execution hook safely across multiple browser states
| |
| if (document.readyState === "complete" || document.readyState === "interactive") {
| |
| setTimeout(processRandomShort, 100);
| |
| } else {
| |
| document.addEventListener("DOMContentLoaded", processRandomShort);
| |
| }
| |
| })();
| |
| </script>
| |
| </includeonly> | | </includeonly> |
|
| |
| <choose>
| |
|
| |
| <option>
| |
| <div style="background:#feffe1;padding:10px;border:0px solid #ddd;border-radius:8px;width:280px;">
| |
| <div style="width:260px; height:260px; overflow:hidden; border-radius:10px;">
| |
| {{youtube_ditl|MJ_y_ehqwrc}}
| |
| </div>
| |
| <div style="padding-top:10px;text-align:center;font-weight:bold;color:#345b63;">
| |
| Experts Knowing the Soul
| |
| </div>
| |
| </div>
| |
| </option>
| |
|
| |
| <option>
| |
| <div style="background:#feffe1;padding:10px;border:0px solid #ddd;border-radius:8px;width:280px;">
| |
| <div style="width:260px; height:260px; overflow:hidden; border-radius:10px;">
| |
| {{youtube_ditl|-IKlL_FMr5M}}
| |
| </div>
| |
| <div style="padding-top:10px;text-align:center;font-weight:bold;color:#345b63;">
| |
| Variety Is The Mother of Enjoyment
| |
| </div>
| |
| </div>
| |
| </option>
| |
|
| |
| <option>
| |
| <div style="background:#feffe1;padding:10px;border:0px solid #ddd;border-radius:8px;width:280px;">
| |
| <div style="width:260px; height:260px; overflow:hidden; border-radius:10px;">
| |
| {{youtube_ditl|MJ_y_ehqwrc}}
| |
| </div>
| |
| <div style="padding-top:10px;text-align:center;font-weight:bold;color:#345b63;">
| |
| Experts Knowing the Soul
| |
| </div>
| |
| </div>
| |
| </option>
| |
|
| |
| <option>
| |
| <div style="background:#feffe1;padding:10px;border:0px solid #ddd;border-radius:8px;width:280px;">
| |
| <div style="width:260px; height:260px; overflow:hidden; border-radius:10px;">
| |
| {{youtube_ditl|SzvEfqAmXeY}}
| |
| </div>
| |
| <div style="padding-top:10px;text-align:center;font-weight:bold;color:#345b63;">
| |
| How To Understand Real Truth
| |
| </div>
| |
| </div>
| |
| </option>
| |
|
| |
| <option>
| |
| <div style="background:#feffe1;padding:10px;border:0px solid #ddd;border-radius:8px;width:280px;">
| |
| <div style="width:260px; height:260px; overflow:hidden; border-radius:10px;">
| |
| {{youtube_ditl|gtiq2SKjYqQ}}
| |
| </div>
| |
| <div style="padding-top:10px;text-align:center;font-weight:bold;color:#345b63;">
| |
| Bhakti-Yoga Is Meant For The Cleansed Hearted
| |
| </div>
| |
| </div>
| |
| </option>
| |
|
| |
| <option>
| |
| <div style="background:#feffe1;padding:10px;border:0px solid #ddd;border-radius:8px;width:280px;">
| |
| <div style="width:260px; height:260px; overflow:hidden; border-radius:10px;">
| |
| {{youtube_ditl|XRycdTVXVWU}}
| |
| </div>
| |
| <div style="padding-top:10px;text-align:center;font-weight:bold;color:#345b63;">
| |
| Imitating The Holy Names
| |
| </div>
| |
| </div>
| |
| </option>
| |
|
| |
| </choose>
| |
