Skip to content
Home > Posts > How to Embed a Twitch Livestream in WordPress

How to Embed a Twitch Livestream in WordPress

September 24, 2020 | ,

Our Websites + Marketing platform recently added a new feature called “Livestream” which allows the customer to choose between YouTube or Twitch and then enter the channel name to embed a stream of their choosing. In the same way, we can embed livestreams for customers if they provide us with the platform and channel name. This article will cover how to embed a livestream on a WordPress site using the twitch platform.

Note: Domains that use Twitch embeds must use SSL certificates. So if the site is not live yet or does not have an SSL, expect the player not to work.

Embedding a Twitch Livestream

If you’re embedding this on a page, use a custom HTML module. If you are embedding it in a post, use a custom HTML block. Paste the following code into the module or block:

<html>
  <body>
    <!-- Add a placeholder for the Twitch embed -->
    <div id="twitch-embed"></div>

    <!-- Load the Twitch embed script -->
    <script src="https://embed.twitch.tv/embed/v1.js"></script>

    <!--
      Create a Twitch.Embed object that will render
      within the "twitch-embed" root element.
    -->
    <script type="text/javascript">
      var embed = new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        channel: "[PASTE CHANNEL NAME]",
        layout: "video-with-chat",
        autoplay: false,
      });

      embed.addEventListener(Twitch.Embed.VIDEO_READY, () => {
        var player = embed.getPlayer();
        player.play();
      });
    </script>
  </body>
</html>

Replace [PASTE CHANNEL NAME] with the channel name provided by the customer.

Center the Player

In order to center align the player, you can either change the width to 100% OR if that doesn’t work/look right, place the following CSS into the customizer: 

div#twitch-embed {
    text-align: center;
}

Embed Parameters

OptionTypeDescription
allowfullscreenbooleanIf true, the player can go full screen. Default: true.
autoplaybooleanIf true, the video starts playing automatically, without the user clicking play. The exception is mobile devices, on which video cannot be played without user interaction. Default: true.
channelstringName of the chat room and channel (live content only).
collectionstringThe VOD collection to play. If you use this, you may also specify an initial video in the VOD collection, otherwise playback will begin with the first video in the collection. All VODs are auto-played. Chat replay is not supported. Example parameters object:
{ video: "124085610", collection: "GMEgKwTQpRQwyA" }
heightnumber or stringHeight of the rendered element, in pixels. This can be expressed as a percentage, by passing a string like 50%. Minimum: 400. Default: 480.
layoutstringDetermines the screen layout. Valid values:video-with-chat: Default if channel is provided, and only supported for live content. Shows both video and chat side-by-side. At narrow sizes, chat renders under the video player.video: Default if channel is not provided. Shows only the video player (omits chat).
mutedbooleanSpecifies whether the initial state of the video is muted. Default: false.
parentstring[]Required if your site is embedded on any domain(s) other than the one that instantiates the Twitch embed. Example parent parameter: ["streamernews.example.com", "embed.example.com"].
themestringThe Twitch embed color theme to use. Valid values: light or dark. Default: dark.
timestringTime in the video where playback starts. Specifies hours, minutes, and seconds. Default: 0h0m0s (the start of the video).
videostringID of a VOD to play. Chat replay is not supported.
widthnumber or stringMaximum width of the rendered element, in pixels. This can be expressed as a percentage, by passing a string like 100%. Minimum: 340. Default: 940.

Source: https://dev.twitch.tv/docs/embed/everything

, , , , ,
Scroll To Top