Search code examples
javascripthtmlcsstwitchtwitch-api

Scale an embedded Twitch video to 100%

I use the following code to embed a Twitch stream on an HTML page which uses TailwindCSS:

<section aria-labelledby="Live-Stream Video">
  <!-- Add a placeholder for the Twitch embed -->
  <div id="twitch-embed" phx-update="ignore"></div>

    <!-- Load the Twitch embed script -->
    <script src="https://player.twitch.tv/js/embed/v1.js"></script>

    <!-- Create a Twitch.Player object. This will render within the placeholder div -->
    <script type="text/javascript">
      new Twitch.Player("twitch-embed", {
        channel: "example",
        width: "100%",
        height: "100%",
        autoplay: "true"
      });
    </script>
  </div>
</section>

The result:

enter image description here

The video doesn't use the full possible width of that (within the TailwindCSS layout). I don't know how width that is. How can I tell the Twitch.Player to use what ever space is there within the boundaries of the black area?

Solution

  • Just style the resulting container and iframe with css:

    #twitch-embed {
  height: 0;
  position: relative;
  overflow: hidden;
  padding: 0 0 56.25%;
  width: 100%;
  border-radius: 8px;
}

#twitch-embed iframe {
  position: absolute;
  height: 100%;
  width: 100%;
}