Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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 post
  • 1 month later...
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

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

Link to post
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 post

@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 best , and see my profile. Thanks for your support!

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...