Widget:Skillbox

<script src="//api.html5media.info/1.2.2/html5media.min.js"></script> <script> (function () {

 const raw = document.getElementById('infoboxboss-data');
 if (!raw) return;

 const habilidades = [];

 for (let i = 1; i <= 10; i++) {
   const nome = raw.dataset[`hab${i}`];
   const descricao = raw.dataset[`de${i}`];
   const videoFile = raw.dataset[`vid${i}`];
   if (!nome || !videoFile) continue;

   habilidades.push({
     nome,
     descricao,
     videoUrl: `https://wiki.gla.com.br/index.php/Special:FilePath/${videoFile}`,
     id: `video${i}`
   });
 }

 const tabsContainer = document.getElementById('skill-tabs');
 const videoContainer = document.getElementById('skill-videos');
 const descText = document.getElementById('desc-text');

 habilidades.forEach((hab, idx) => {
   const btn = document.createElement('button');
   btn.className = 'infobox-skill-tab' + (idx === 0 ? ' active' : );
   btn.dataset.video = hab.id;
   btn.textContent = hab.nome;
   tabsContainer.appendChild(btn);

   const videoWrapper = document.createElement('div');
   videoWrapper.id = hab.id;
   videoWrapper.className = 'skill-video';
   videoWrapper.style.display = idx === 0 ? 'block' : 'none';

   const video = document.createElement('video');
   video.className = 'infobox-skill-video';
   video.controls = true;
   video.preload = 'auto';

   const source = document.createElement('source');
   source.src = hab.videoUrl;
   source.type = 'video/mp4';
   video.appendChild(source);

   videoWrapper.appendChild(video);
   videoContainer.appendChild(videoWrapper);
 });

 if (habilidades.length) {
   descText.innerHTML = `${habilidades[0].descricao}`;
 }

 const tabs = document.querySelectorAll('.infobox-skill-tab');
 const videos = document.querySelectorAll('.skill-video');

 tabs.forEach((tab, idx) => {
   tab.addEventListener('click', () => {
     tabs.forEach(t => t.classList.remove('active'));
     tab.classList.add('active');

     descText.innerHTML = `${habilidades[idx].descricao}`;

     videos.forEach(v => {
       v.style.display = (v.id === habilidades[idx].id) ? 'block' : 'none';
       const videoTag = v.querySelector('video');
       if (v.id === habilidades[idx].id) {
         videoTag.load();
         videoTag.play();
       } else {
         videoTag.pause();
       }
     });
   });
 });

 raw.remove();

})(); </script>

<style> .skill-box {

 background: none;;
 color: #222;
 border-radius: 12px;
 box-shadow: none;
 width: 100%;
 max-width: 700px;
 box-sizing: border-box;
 padding: 24px 24px 20px 24px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 18px;
 backdrop-filter: blur(2px);
 margin: 0 auto 24px auto;

} .skill-video{

 aspect-ratio: 16 / 9;

} </style>