Twitch < iframe > player


#1

Hi !
I have ran into an issue that I seem not to find a workaround to.
I am developing a webapp where Twitch.TV streams are embedded into, and when the user selects a stream the player opens up and is in window.innerHeight & window.innerWidth and thats when I run into some issues. I need a overlay on top of the iframe, but when I render what ever divs on top and add z- index, position attributed etc, the twitch iframe always pops in front. I mean I can see my parent DIV for a second, but soon as the stream starts playing it’s gone.

Does anyone have anyideas how can i render a overlay on top of the twitch player iframe ?


#2
<div id="holder" style="position: relative">
     <iframe />
     <div id="overlay" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: 9001;">My overlay</div>
</div>

#3

Yea, that seems to work. Now when I look at it, I’m like DUUUH…! I think its enough coding for me today.
Thanks alot


#4

Any idea how to forse the automute off ? adding <iframe muted="false"></iframe> and <iframe src="streamURL&muted=false"><iframe> seem to not work time to time.
I’ve read that its to do something with chrome, but would like to enable audio when stream is initiated.


#5

You don’t

All browsers prevent autoplay unless you are muted, unless your website has a “good activity score” by the user before hand.