Embed Your Twitch Channel
In this lesson, you will learn how to embed your Twitch channel on your own website. For a full list of embed options, visit the Twitch Developer Documentation.
In our Twitch Website Code, the following code embeds our Twitch Channel. It was taken from "embedding everything".
<!-- Twitch Channel Embedded-->
<div class="row" align="center">
<h2>My Twitch Channel</h2>
<!-- 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">
new Twitch.Embed("twitch-embed", {
width: "100%",
height: 480,
channel: "daisychaincosplay",
muted: true
});
</script>
<!-- More Embed Options: https://dev.twitch.tv/docs/embed/ -->
</div>I took the code from the Twitch documentation, stuck it in it's own centered row and gave it an h2 heading.
I changed the channel attribute to my own channel "daisychaincosplay" and added a mute attribute.
Mouse hover over the ➼ blue text to highlight the code. <!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
<script type="text/javascript">
new Twitch.Embed("twitch-embed", {
width: "100%",
height: 480,
channel: "daisychaincosplay",
muted: true
});
</script>
➼ width - How wide do you want the object to appear? In this case it is as wide as the element that contains it.
➼ height - How tall do you want the object to be? In this case it is 480px.
➼ channel - What is your Twitch channel name?
➼ muted - We want the video to automatically be muted. The user has to unmute to hear the video.
Why Mute?
Generally speaking, people do not like informative websites to make noise. If someone goes directly to your Twitch channel or YouTube video, they expect it to play sound. If someone goes to your website, they may not anticipate loud noises. They may be in a public place and not using headphones. Unexpected loud sounds can cause a person to imediately leave your website and they may not return!
People also associate auto play with ads. Your Twitch channel may even begin with an ad. If someone clicks on a link then hears an ad (or what they believe to be an ad), they could think of your site as click bait. That is not the recognition you want for your brand.