1

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 May 13 '14 at 13:43
  • Is that literally two different video players? And what do you mean by "don't play nice together"? WWIII?! – MrWhite May 13 '14 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 May 14 '14 at 12:33
  • Mobile safari has limited to no support for iframes. – Riccardo Zorn May 22 '14 at 19:29
  • The iframes work fine (content is loaded) they just conflict for some reason. – Brian Peat May 23 '14 at 0:19
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');
        e.preventDefault();
    });
    jQuery('.tab2').on('click', function (e) {
        $('#iframe1').attr('src', '');
        $('#iframe2').attr('src', 'http://example.com');
        e.preventDefault();
    });
});

HTML

<ul>
    <li><a href="#tab1" class="tab1">Tab #1</a> </li>
    <li><a href="#tab2" class="tab2">Tab #2</a> </li>
</ul>
<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 Aug 4 '14 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 Aug 4 '14 at 1:47
  • I'm just trying to add an answer to some of the unanswered questions – johanpw Aug 4 '14 at 1:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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