Ranking

]; function extractVideoId(raw){https://i.ytimg.com/vi/xdAHcpWqboI/hqdefault.jpg if(!raw) return null; try{ const url = new URL(raw); const v = url.searchParams.get('v'); if(v && /^[a-zA-Z0-9_-]{11}$/.test(v)) return v; const yb = url.hostname.includes('youtu.be') ? url.pathname.split('/').filter(Boolean)[0] : null; if(yb && /^[a-zA-Z0-9_-]{11}$/.test(yb)) return yb; const parts = url.pathname.split('/').filter(Boolean); const embedIdx = parts.indexOf('embed'); if(embedIdx !== -1 && parts[embedIdx+1]) return parts[embedIdx+1]; const shortsIdx = parts.indexOf('shorts'); if(shortsIdx !== -1 && parts[shortsIdx+1]) return parts[shortsIdx+1]; }catch(e){ const m = String(raw).match(/(?:v=|\/(?:embed|shorts|youtu\.be)\/)([a-zA-Z0-9_-]{11})/); if(m) return m[1]; } return null; } function loadIframe(container, videoId){ container.innerHTML = ''; const iframe = document.createElement('iframe'); iframe.title = 'YouTube player'; iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1`; iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'; iframe.allowFullscreen = true; container.appendChild(iframe); } function createThumb(videoId){ const wrap = document.createElement('div'); wrap.className = 'rm-thumb'; const img = document.createElement('img'); img.loading = 'lazy'; img.decoding = 'async'; img.src = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`; const play = document.createElement('span'); play.className = 'rm-play'; wrap.appendChild(img); wrap.appendChild(play); wrap.addEventListener('click', ()=> loadIframe(wrap.parentElement, videoId)); return wrap; } const grid = document.getElementById('rmGrid'); function createCard(video, rank){ const videoId = extractVideoId(video.url); if(!videoId) return null; const card = document.createElement('article'); card.className = 'rm-card'; card.dataset.id = video.id; const media = document.createElement('div'); media.className = 'rm-media'; media.appendChild(createThumb(videoId)); const body = document.createElement('div'); body.className = 'rm-body'; const title = document.createElement('h3'); title.className = 'rm-title'; title.innerHTML = `${rank} ${video.title}`; const meta = document.createElement('p'); meta.className = 'rm-meta'; meta.textContent = video.artist; body.appendChild(title); body.appendChild(meta); card.appendChild(media); card.appendChild(body); return card; } function render(list){ grid.innerHTML = ''; list.forEach((v, i)=>{ const card = createCard(v, i + 1); if(card) grid.appendChild(card); }); const first = grid.querySelector('.rm-card'); if(first) first.classList.add('rm-top1'); } render(videos); })();