Jump to content

Trying to add a responsive Twitch embed

Recommended Posts

I'm going insane trying to figure out how to have my Twitch channel embedded with chat on my website, but have it be a responsive embed.

Here is where I've got it embedded: https://dumb-industries.com/dumb247

Here's the code I'm using in the Code block, which all works completely fine, but if I set width or height to "100%" the embed stops working altogether. I currently have it set to 1400 width, which is the same width of the website. But if you view it on mobile, you just see a gigantic Twitch window.

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

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

    <!-- Create a Twitch.Embed object that will render within the "twitch-embed" element -->
    <script type="text/javascript">
      new Twitch.Embed("twitch-embed", {
        width: 1400,
        height: 720,
        channel: "dumbindustries",
        // Only needed if this page is going to be embedded on other websites
        parent: ["dumb-industries.squarespace.com", "dumb-industries.com"]
      });
    </script>
  </body>
</html>

I know there's likely some Custom CSS that needs to be added to make it work, but everything I've tried doesn't work. I am not a coder by any means so any help would be so greatly appreciated! Thank you!!!

Edited by csgersbeck
Link to comment
  • Replies 1
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.