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) {
           habilidades[0].descricao = habilidades[0].descricao.replace(/(.*?)/g, '$1');
           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');
               habilidades[idx].descricao = habilidades[idx].descricao.replace(/(.*?)/g, '$1');
               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>