将嵌入的 Twitch 视频缩放到 100% ? Check it in action on Codepen

如何解决将嵌入的 Twitch 视频缩放到 100% ? Check it in action on Codepen

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

解决方法

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

,

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

,

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

---