0

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

4

3 回答 3

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

于 2021-04-10T15:01:18.057 回答
0

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


在 Codepen 上检查它





于 2021-04-09T07:27:59.863 回答
0

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

于 2021-04-09T07:06:13.410 回答