Jump to content

Embedding Twitch Live Stream

Recommended Posts

Site URL: https://www.marsharosenblatt.com

I am attempting to embed the coding for a Twitch live stream onto my website. It's my friends' Twitch account, and they sent me the following embed code:
 

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div id="<player div ID>"></div>
<script type="text/javascript">
  var options = {
    width: <1920>,
    height: <1080>,
    channel: "<ioustudio>",
    video: "<video ID>",
    collection: "<collection ID>",
    // ["ioustudio.com", "marsharosenblatt.com"]
  };
  var player = new Twitch.Player("<player div ID>", options);
  player.setVolume(0.5);
</script>

 When I try to add it through the embed window of the video block, it says "invalid video embed" and when I do it through an embed block it says "script disabled". Any insight? Thank you

Link to comment
  • 1 month later...
  • Replies 8
  • Views 6.1k
  • Created
  • Last Reply

Top Posters In This Topic

On 1/25/2021 at 6:24 PM, JustinSeimits said:

@marsharosenblatt 

Did you end up figuring out how to do this? 

I have a client that is needing this and would love to know what you figured out. 

Yes! Well, a coder friend of mine did. 

1) This is the coding for embedding on the particular page. Go to pages, click the settings icon next to it, click advanced, and enter it in the window "Page Header Code Injection" (I've left my wesbite and twitch channel in the code - you'll want to change that)

<!-- Load the Twitch embed script -->
    <script src="https://embed.twitch.tv/embed/v1.js"></script>
<div class="twitch">
  <div class="twitch-video">
    <iframe
      src="https://player.twitch.tv/?channel=ioustudio&parent=www.marsharosenblatt.com&parent=marsharosenblatt.com&parent=cardioid-fish-nwmk.squarespace.com&autoplay=false"
      frameborder="0"
      scrolling="no"
      allowfullscreen="true"
      height="100%"
      width="100%">
    </iframe>
  </div>
  <div class="twitch-chat">
    <iframe
      frameborder="0"
      scrolling="no"
      src="https://www.twitch.tv/embed/ioustudio/chat?parent=www.marsharosenblatt.com&parent=marsharosenblatt.com&parent=cardioid-fish-nwmk.squarespace.com"
      height="100%"
      width="100%">
    </iframe>
  </div>
</div>

 

2) Click Design, scroll to the bottom and click Custom CSS:
 

/* start philna.sh twitch code */
.twitch {
    margin-top: 38vw
}

.twitch .twitch-video {
  padding-top: 56.25%;
  position: relative;
  height: 0;
}

.twitch .twitch-video iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
 

Hope this helps!

Link to comment

@vanessakrystin

For the width, if you want to make it wider. Edit the page section and change the width.

2113207876_ScreenShot2021-02-05at10_04_56PM.png.f15ba491711c490e39da2633fa266fe3.png

It looks like your height is set to large. But there does seem to be an excessive amount of padding around the vid.

I'm not able to dig deeper at the moment but perhaps someone else can. If you don't get a response in several days, bump the thread.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 year later...

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.