Stop autoplay when embeding or do not load until button is pressed

I’m using an embed that looks kind of like this on a site:

                                        <iframe class="embed-responsive-item" 
					+        src="" 
					+        height="200" 
					+        width="720" 
					+        frameborder="0" 
					+        scrolling="no" 
					+	     muted="true"
					+        allowfullscreen>
					+    </iframe>

This code is in a hidden div and when a user clicks a button the div will slide down displaying the stream. I think the stream always loading is causing the page speed to slow down; and since some people will have no desire to see the stream, I don’t feel as though their experience should be hindered because of this.

I’ve looked into using the Twitch API because from what I’ve researched, it might be the only way, but I honestly have NO clue where to start with that. I don’t even have the slightest clue how to make a stream show on my webpage using the API and I don’t see any starter template or anything available.

Any help on these issues would be so fantastic!!

Thanks a lot in advance everybody!


You can use the autoplay parameter to turn off autoplay.

autoplay=true (default) turns on autoplay
autoplay=false turns off the autoplay

Wow, that worked. Thanks. I swear I’ve tried about every variant of Auto_play,auto-play, etc and I almost positive I tried that at one time. I obviously have a bit to learn.

I have both the stream embed and the chat embed on the page. Do you know to NOT load both the stream and chat embeds until a link/button is clicked? I was hoping setting autoplay=false would make the browser not load as much until a play button is clicked, but it doesn’t seem to make a difference.

Thanks again.

Iframes load even when hidden, so you’d need to fill the src attribute when the button is clicked.

Ok, I will give that a shot then. You’ve been a great help, night! Thank you.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.