To be more specific, I have 2 video players loaded into an article on two different tabs. One is live, the other is on-demand. They don't play nice together, but it's nice to have them available on tabs instead of in two different articles completely.

I am looking for a tab plugin or even just tab code I can use in the article that will load and unload the tab contents so that when you're on tab 1, tab 2's contents aren't loaded at all, and when you click on tab 2, tab 1 is flushed and then tab 2's contents load.

is this even possible, or should I just use 2 different articles and a menu so that each player is on a different page?

  • What video player(s) are you using? I think this might be easier to solve by looking at them rather than the tabs.
    – TryHarder
    Commented May 13, 2014 at 13:43
  • Is that literally two different video players? And what do you mean by "don't play nice together"? WWIII?!
    – MrWhite
    Commented May 13, 2014 at 23:36
  • One of them is Make.tv, that's the live player. The other is Limelight, that's our on-demand player. Two completely different systems. When they're both on the same page, the live player loses functionality on a mobile device completely. And if we use the playlist function on the limelight player, it also breaks that function. The Make.tv player has no API, we literally can't do a thing with it except just paste the iframe code in. The limelight player does have an API so we have it working with a different type of playlist. But Make.tv still breaks on mobile.
    – Brian Peat
    Commented May 14, 2014 at 12:33
  • Mobile safari has limited to no support for iframes. Commented May 22, 2014 at 19:29
  • The iframes work fine (content is loaded) they just conflict for some reason.
    – Brian Peat
    Commented May 23, 2014 at 0:19

1 Answer 1


If both tabs contain iframes, you could use $('#iframe').attr('src', 'http://example.com'); to set the iframe content (and $('#iframe').attr('src', ''); to empty it. I made a small jsfiddle (without the tabs). I'm sure this code can be improved, and it has to be changed to fit your needs, but maybe it'll give you a push in the right direction:

jQuery code

jQuery(document).ready(function () {
    jQuery('.tab1').on('click', function (e) {
        $('#iframe2').attr('src', '');
        $('#iframe1').attr('src', 'http://example.com');
    jQuery('.tab2').on('click', function (e) {
        $('#iframe1').attr('src', '');
        $('#iframe2').attr('src', 'http://example.com');


    <li><a href="#tab1" class="tab1">Tab #1</a> </li>
    <li><a href="#tab2" class="tab2">Tab #2</a> </li>
<h2>iframe 1:</h2>
<iframe id="iframe1" frameborder="0" src=""></iframe>
<h2>iframe 2:</h2>
<iframe id="iframe2" frameborder="0" src=""></iframe>
  • I actually don't work at this employer any longer, but I may dig up the code for the two players and try this out anyway. Thanks!
    – Brian Peat
    Commented Aug 4, 2014 at 1:34
  • OK, I see... Old post :) If you do test the code, please let me know if it worked, just out of curiosity.
    – johanpw
    Commented Aug 4, 2014 at 1:47
  • I'm just trying to add an answer to some of the unanswered questions
    – johanpw
    Commented Aug 4, 2014 at 1:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.