Staredit Network > Forums > Technology & Computers > Topic: Javascript! Replace Twitch's video with Hitbox's
Javascript! Replace Twitch's video with Hitbox's
Apr 12 2015, 8:30 pm
By: Apos  

Apr 12 2015, 8:30 pm Apos Post #1

I order you to forgive yourself!

Here is my situation: I currently stream on Twitch as well as on Hitbox.
http://www.twitch.tv/apostolique
http://www.hitbox.tv/Apostolique

I want a Javascript Function that I can insert into twitch from the browser's url to replace Twitch's video stream for Hitbox's embed one if that's possible.

Here is the Hitbox embed code:
<iframe width="100%" height="360" src="http://hitbox.tv/#!/embed/apostolique?autoplay=true" frameborder="0" allowfullscreen></iframe>


In the Twitch page, the above iframe needs to replace the div with the unique ID of #player.




Apr 12 2015, 8:48 pm Roy Post #2

An artist's depiction of an Extended Unit Death

Code
javascript:$('.dynamic-player').html('<iframe width="100%" height="360" src="http://hitbox.tv/#!/embed/apostolique?autoplay=true" frameborder="0" allowfullscreen></iframe>');





Apr 12 2015, 8:56 pm Apos Post #3

I order you to forgive yourself!

Quote from Roy
snip
Thanks! I'll be playing around with that to make it exactly how it should.

Edit: Slightly better version it would seem:
Code
document.getElementById("player").outerHTML = '<iframe width="100%" height="360" src="http://hitbox.tv/#!/embed/apostolique?autoplay=true" frameborder="0" allowfullscreen></iframe>';


It seems like I only run those with the console though.

Edit 2: Even better:
Code
javascript:document.getElementById("player").outerHTML = '<div class="wrapper" style="width:100%;height:100%;margin:0 auto;"> <div class="h_iframe" style="position:relative;"> <img class="ratio" src="http://placehold.it/16x9" style="display:block;width:100%;height:auto;"/> <iframe style="position:absolute;top:0;left:0;width:100%; height:100%;" width="100%" height="100%" src="http://hitbox.tv/#!/embed/apostolique?autoplay=true" frameborder="0" allowfullscreen></iframe> </div></div>';


With this last one, the Hitbox stream will perfectly replace the Twitch one almost seamlessly.

Edit 3: Now it works with the theater mode!

Code
javascript:document.getElementById("player").outerHTML = '<div id="player"> <div class="wrapper" style="width:100%;height:100%;margin:0 auto;"> <div class="h_iframe" style="position:relative;"> <img class="ratio" src="http://placehold.it/16x9" style="display:block;width:100%;height:auto;"/> <iframe style="position:absolute;top:0;left:0;width:100%; height:100%;" width="100%" height="100%" src="http://hitbox.tv/#!/embed/apostolique?autoplay=true" frameborder="0" allowfullscreen></iframe> </div> </div></div>';


Post has been edited 4 time(s), last time on Apr 12 2015, 11:43 pm by Apos.




Options
  Back to forum
Please log in to reply to this topic or to report it.
Members in this topic: None.
[10:02 pm]
Symmetry -- I was really just figuring out how to compile
[10:02 pm]
Symmetry -- I didn't make it do anything
[09:17 pm]
Ultraviolet -- hell yeah. did you have trouble making the button functional, or just haven't gotten there yet?
[08:29 pm]
Symmetry -- I made the marine shoot lasers and gave the medic a nonfunctional button
[08:07 pm]
Ultraviolet -- Symmetry
Symmetry shouted: I did my first EUD thing today. Feels like me finding arsenal at age 8 again
haha for sure. in some ways it's even more exciting because you can play EUD maps on regular battle.net, don't need to convince someone to download your mod to play with you. what did you do?
[06:47 pm]
Symmetry -- I did my first EUD thing today. Feels like me finding arsenal at age 8 again
[03:20 pm]
l)ark_ssj9kevin -- le reddit
[02:55 pm]
Moose -- >reddit :rip2:
[02:07 pm]
IskatuMesk -- reddit 💀
Please log in to shout.


Members Online: NudeRaider