Embedding Twitch Live Stream

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

@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. 

On 1/25/2021 at 9: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. 

Try Code Block

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!

@marsharosenblatt Wow this worked!

Do you happen to know how I can fix the placement of the Twitch iframe though as it's coming up quite wonky on my end?

contact-festival.com/stream

Let me know if you can help, thanks!

I suggest using a code block. Then when you see the Script Disabled message go Full Preview.

@creedon

That seemed to work the same, but unfortunately the positioning is still wonky. Should I be changing it from absolute to fixed?

@vanessakrystin

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

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.

I cannot thank OP enough for this!!!! You're a lifesaver!

Althought, I'm far from finished. Placement and everything is way off. how can i personalize this?