将嵌入式 Twitch 视频缩放到 100%答案

【问题标题】：Scale an embedded Twitch video to 100%将嵌入式 Twitch 视频缩放到 100%
【发布时间】：2021-04-09 07:01:03
【问题描述】：

我使用以下代码在使用 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 使用黑色区域边界内的任何空间？

【问题讨论】：

标签： javascript html css twitch twitch-api

【解决方案1】：

只需使用 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%;
}

【讨论】：

【解决方案2】：

尝试使用px而不是%并尝试使用参数allowfullscreen=true

【讨论】：

px 而不是 % 会更改黑色背景的宽度，但不会更改实际视频的宽度。 allowfullscreen=true 不显示任何内容。

【解决方案3】：

使用固定值，如"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/

【讨论】：

这会占据整个屏幕。我只希望它在
中获得最大值。
@wintermeyer 然后将height 和width 设置为等于div 的height 和width。