将嵌入的 Twitch 视频缩放到 100%

Question

我使用以下代码在使用 TailwindCSS 的 HTML 页面上嵌入 Twitch 流：

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

结果：

该视频未使用其可能的全部宽度（在 TailwindCSS 布局中）。我不知道那是多宽。我怎样才能告诉 Twitch.Player 使用黑色区域边界内的 space？

Answer 1

尝试使用px代替%并尝试参数allowfullscreen=true

Answer 2

使用 "720" 等固定值...像这样：

new Twitch.Player("twitch-embed", {
  channel: "example",
  width: "1280",
  height: "720",
  autoplay: "true"
});

<script src="https://player.twitch.tv/js/embed/v1.js"></script>
<section aria-labelledby="Live-Stream Video">
  <div id="twitch-embed" phx-update="ignore"></div>
</section>

Check it in action on Codepen

文档：https://dev.twitch.tv/docs/embed/video-and-clips/

Answer 3

只需使用 css:

设置生成的容器和 iframe 的样式

#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%;
}

将嵌入的 Twitch 视频缩放到 100%

Scale an embedded Twitch video to 100%

javascript

html

css

twitch

twitch-api

Check it in action on Codepen