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.
[04:42 am]
Zycorax -- :wob:
[06:38 pm]
Ultraviolet -- :wob:
[2026-6-29. : 2:13 pm]
Vrael -- pee poo sibling
[2026-6-28. : 7:00 pm]
Symmetry -- poo poo papa
[2026-6-28. : 2:46 pm]
lil-Inferno -- pee pee child
[2026-6-27. : 6:10 pm]
Ultraviolet -- sweet summer child
[2026-6-26. : 10:31 am]
NudeRaider -- blessed innocent soul knows nothing of the strife we had before EUDs were discovered :teehee:
[2026-6-23. : 3:29 am]
DarkenedFantasies -- Probably just didn't care. For example, at some point before release, they've updated the graphics of some of the Protoss buildings (Forge, CyberCore, Citadel, Observatory, Arbiter Tribunal), but instead of properly re-rendering them with edited 3D models, they did crappy copy-paste jobs on the rendered graphics.
[2026-6-22. : 8:35 pm]
Ultraviolet -- :wob:
[2026-6-21. : 11:38 pm]
Symmetry -- :wob:
Please log in to shout.


Members Online: jun3hong