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.
[06:11 pm]
Ultraviolet -- :wob:
[2023-2-04. : 11:43 am]
Zycorax -- :wob:
[2023-2-03. : 6:54 pm]
Zoan -- :wob:
[2023-2-03. : 3:35 am]
Ultraviolet -- :wob:
[2023-2-02. : 3:26 am]
Ultraviolet -- :wob:
[2023-2-01. : 2:29 am]
Ultraviolet -- how about yourself?
[2023-2-01. : 2:29 am]
Ultraviolet -- pretty good elite ejaculator
[2023-1-31. : 10:07 pm]
ejac1337 -- How's it going guys?
[2023-1-31. : 2:59 pm]
No-Name-Needed-II -- @Ultraviolet Thanks! It wasn't easy defeating the TMOANC lol..
[2023-1-30. : 8:45 pm]
Ultraviolet -- No-Name-Needed-II
No-Name-Needed-II shouted: Nobody showed interest in Authoring a story for my KotK Shores of Hell terrain so I uploaded it to terrain genre, You'll never look at Asheworld Tileset the same way again :) http://www.staredit.net/sc1db/file/6236/
Checked it out last night, definitely looks interesting. Can tell a lot of effort went into it
Please log in to shout.


Members Online: Roy