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.
[2026-8-03. : 12:56 am]
Symmetry -- It is not! the working title atm is "Road to SENCON 2026"
[2026-8-03. : 12:31 am]
l)ark_ssj9kevin -- reindeer breeding 3???
[2026-8-02. : 10:43 pm]
Symmetry -- No, I have another map in the works that does tho
[2026-8-02. : 9:55 pm]
l)ark_ssj9kevin -- are there EUDs now?
[2026-8-02. : 5:14 am]
Ultraviolet -- 🔥
[2026-8-01. : 9:26 pm]
Symmetry -- https://staredit.net/topic/18894/ Reindeer Breeding 2 should be fixed now! Find some friends and get your revenge!
[2026-7-31. : 4:32 pm]
lil-Inferno -- "I think they doubled these limits. (not dimensions)" -NudeRaider
[2026-7-30. : 7:12 am]
NudeRaider -- cwinowich
cwinowich shouted: guys does anyone know, what is the max unit limit on extended now ?
don't quote me on it, but I think they doubled these limits. (not dimensions)
[2026-7-30. : 7:10 am]
NudeRaider -- Ultraviolet
Ultraviolet shouted: these guys may as well be pissing in the wind
sounds liberating
[2026-7-30. : 4:43 am]
cwinowich -- i cant quite remember, and cant find it anywhere, 2400 or something? idk
Please log in to shout.


Members Online: Moose