<!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>