3

I am new to jQuery, and I managed to create a tab interface. I want each section of my tab to have a YouTube video. However, when I click play on the video that is on tab 1 for example, and then switch to tab 2, the video on tab 1 still keeps on playing. Please see the entire code here:

http://jsfiddle.net/WwfFE/3/

I would greatly appreciate any help on how to stop the video once the user clicks on other tabs.

Also, when I run this on my Android, flash enabled phone, the videos don't seem to play. Any idea of what I need to do to fix? Or do I need to fix anything else to make code browser compatible?

Marvin Pinto
  • 30,138
  • 7
  • 37
  • 54
Ori
  • 259
  • 2
  • 8
  • 27
  • See: [video won't stop when div is hidden](http://stackoverflow.com/questions/8667882/video-wont-stop-when-div-is-hidden/8668741#8668741). – Rob W Jan 04 '12 at 18:28
  • Hi Rob, thank you so much. I am really new to JavaScript in general - so would appreciate insight as to how to implement this exactly in my code. Thank you! – Ori Jan 04 '12 at 18:30
  • If you're new to JavaScript, and willing to learn it, my best advice is: **Bury jQuery**, and learn the [basics of JavaScript](https://developer.mozilla.org/en/JavaScript/Guide) first. *Response to question*: An easier implementation of the YouTube API can be found here: **[Youtube iframe API: how do I control a iframe player that's already in the HTML?](http://stackoverflow.com/questions/7443578/youtube-iframe-api-how-do-i-control-a-iframe-player-thats-already-in-the-html#7513356)**. – Rob W Jan 04 '12 at 18:35
  • Hi Rob, thank you very much. I will definitely check it out. What's Bury jQuery? Is that a book? Where do I find it. Also - I appreciate the link... I'll try to figure it out and will let you know if I run into issues. – Ori Jan 04 '12 at 18:40
  • By "bury jQuery", I mean that you'd better *not* use [jQuery](http://api.jquery.com/), because it does not teach you how to write JavaScript code. *When you've mastered jQuery, you still do not know much about JavaScript.* – Rob W Jan 04 '12 at 20:15

2 Answers2

4

This should work:

http://jsfiddle.net/WwfFE/5/

I simply put all your URL's in an array. When the user decides to leave the tab, I clear the src of the iframe so that the video "stops" playing.

The first time your currentTab variable is still empty though, so I retrieve it by looking at which <li> has its class set to active. From this <li> I take the link and set the currentTab variable to its href.

if (currentTab == '') {
   //Find current tab:
   currentTab = $('#tabs ul li.active').find('a').attr('href');
}

//Stop playing video:
if (currentTab != '')
   $('div#' + currentTab).find('iframe').attr('src', '');

When he gets back to any tab, you should not forget to set the src back though, else your iFrame will be empty. It's what I do here:

var index = $(this).attr('id');
$('div#' + currentTab).find('iframe').attr('src', urls[index]);

This code can still be optimized though to reduce the flickering. An easy way to do this is by setting a function on the load trigger of the iframe's. This way you know when the video has been successfully set and it is then that you want to show the tab to the user.

Jules
  • 7,148
  • 6
  • 26
  • 50
  • Jules, you are absolutely amazing. THANK YOU THANK YOU so much. I've been spending hours trying to figure this out. REALLY REALLY REALLY appreciate your help. – Ori Jan 04 '12 at 18:44
  • Your welcome. I'm glad it helped. Sometimes all it takes is a little bit of creativity... ;-) – Jules Jan 04 '12 at 18:47
  • Hi Jules - I hope all is well. If you don't mind, I have a follow up question for you about this code. Please see: http://stackoverflow.com/questions/9169305 – Ori Feb 07 '12 at 00:16
  • thanks for the awesome solution, just 1 question: How do I 'unrandomized' the 1st-shown tab? Always load 1st tab and content when page load. – Mars Mellow Sep 18 '12 at 05:39
  • @yiyong The random tab is generated through: `var index = Math.floor($tabs.length * Math.random()); $tabs.eq(index).show(); `So you could just replace this with $tabs.eq(0).show(); Btw, please upvote the answer if it helped you. :) – Jules Sep 26 '12 at 13:21
  • Note, with more recent versions of jQuery (1.10.2) this script error's out with "Uncaught Error: Syntax error, unrecognized expression:" – Trevor Jan 04 '14 at 01:35
  • can you add to this solution a Vimeo video ?. can you add arrows to the sides ? @Jules – Francisco Corrales Morales Jan 17 '14 at 23:37
2

Without using any special targeting of iframe or video ids, here's how I stop any playing movie when selecting a different tab. Uses the native bootstrap tab events:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var iframe = $(e.relatedTarget.hash).find('iframe'); 
    var src = iframe.attr('src');
    iframe.attr('src', '');
    iframe.attr('src', src);
s});
Matt Benson
  • 21
  • 1