<!DOCTYPE html> <html lang="pt"> <head> <meta charset="UTF-8"> <title>Player de Vídeo com Proporção de Aspecto Ajustável</title> <link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" /> <style> .video-container { position: relative; overflow: hidden; width: 100%; } .video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ } .plyr { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <div class="video-container"> <div class="video-wrapper"> <video id="player" playsinline controls> <source src="https://r.mjh.nz/PlutoTV/5f997e44949bc70007a6941e-alt.m3u8" type="video/mp4" /> <!-- Mais fontes de vídeo aqui --> </video> </div> </div> <button onclick="changeAspectRatio('16-9')">16:9</button> <button onclick="changeAspectRatio('4-3')">4:3</button> <script src="https://cdn.plyr.io/3.6.8/plyr.polyfilled.js"></script> <script> const player = new Plyr('#player'); function changeAspectRatio(ratio) { var wrapper = document.querySelector('.video-wrapper'); if (ratio === '16-9') { wrapper.style.paddingBottom = '56.25%'; // 16:9 Aspect Ratio } else if (ratio === '4-3') { wrapper.style.paddingBottom = '75%'; // 4:3 Aspect Ratio } } </script> </body> </html>