Skip to main content

Twitch Embed

The code snippets below were created by AthenaRebel

Demo Page

Stream Only​

<div style="padding-bottom: 56.25%; position: relative;">
<iframe width="100%" height="100%" src="https://player.twitch.tv/?autoplay=false&channel=[ CHANNEL NAME HERE ]&parent=[ SHOP URL HERE ]" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"  style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
</div>

Stream Only - Muted​

<div style="padding-bottom: 56.25%; position: relative;">
<iframe width="100%" height="100%" src="https://player.twitch.tv/?autoplay=false&channel=[ CHANNEL NAME HERE ]&muted=true&parent=fourthwall.com" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"  style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
</div>

Stream Only - Autoplay​

<div style="padding-bottom: 56.25%; position: relative;">
<iframe width="100%" height="100%" src="https://player.twitch.tv/?channel=[ CHANNEL NAME HERE ]&parent=[ SHOP URL HERE ]" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"  style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
</div>

Stream Only - Muted & Autoplay​

<div style="padding-bottom: 56.25%; position: relative;">
<iframe width="100%" height="100%" src="https://player.twitch.tv/?channel=[ CHANNEL NAME HERE ]&muted=true&parent=[ SHOP URL HERE ]" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"  style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
</div>

Chat Only - No Audio​

<div style="padding-bottom: 56.25%; position: relative;">
<iframe width="100%" height="100%" src="https://www.twitch.tv/embed/[ CHANNEL NAME HERE ]/chat?parent=[ SHOP URL HERE ]" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"  style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
</div>

JS Embed​

Using a JS Embed gives you many more options, including a Chat & Stream option. You can find more info on JS Embedding here.

<div id="twitch-embed"></div>

<script src="https://embed.twitch.tv/embed/v1.js"></script>
<script type="text/javascript">
  new Twitch.Embed("twitch-embed", {
    width: "100%",
    height: 600,
    channel: "[ YOUR CHANNEL HERE ]"
  });
      embed.addEventListener(Twitch.Embed.VIDEO_READY, () => {
        var player = embed.getPlayer();
        player.play();
      });
</script>
Tip

Make sure to change "channel=[ CHANNEL NAME HERE ]" & "parent=[ SHOP URL HERE ] ", to your respective Twitch channel name & fourthwall shop URL. Example - https://player.twitch.tv/?channel=fourthwallhq&parent=shop.fourthwall.com

Creator Example​

Here is an example from "Dan Vibes" Fourthwall store

Check out Dan Vibes Fourthwall Shop - Link