Масштабируйте встроенное видео Twitch до 100%

Я использую следующий код для встраивания потока Twitch на HTML-страницу, которая использует 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>

Результат:

Видео не использует всю возможную ширину (в макете TailwindCSS). Я не знаю, какая это ширина. Как я могу указать Twitch.Player использовать любое пространство в границах черной области?

javascript html css twitch twitch-api

09.04.2021 10:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 2

Попробуйте использовать px вместо % и попробуйте параметр allowfullscreen=true

px вместо% изменяет ширину черного фона, но не самого видео. allowfullscreen=true ничего не отображает.

— 09.04.2021 10:09

09.04.2021 10:06

Используйте фиксированные значения, такие как "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>