0

I have a video section that is setup as follows:

One video shows up by default when the page loads

There are two tabs of content - each tab holds a list of video thumbnails. When you click on one of the thumbnails, the default video disappears and the video that was clicked shows up in it's place.

I'm using a bit of code I found here: Flash video still playing on DIV that is removed using jQuery (IE bug) - to remove the video and clone it because I was having an issue in IE where the previous video was still playing even though the new video was being loaded.

Now in IE9, the first tab column of videos will not swap out. The second tab column however will.

This is the HTML:

<div class="video-holder">

  <div id="video17" class="large-video" style="display: none;">
   <div class="embed-video">the video</div>
  </div>

  <div id="video18" class="large-video" style="display: none;">
   <div class="embed-video">the video</div>
  </div>

  <div id="video19" class="large-video" style="display: none;">
   <div class="embed-video">the video</div>
  </div>

  <div id="video20" class="large-video" style="display: none;">
   <div class="embed-video">the video</div>
  </div>

</div>

<ul>
<li><a href="#video-tab1">Tab 1</a></li>
<li><a href="#video-tab2">Tab 2</a></li>
</ul>

<div id="video-tab1">
    <a href="#" id="link17" class="video-link">thumbnail</a>
    <a href="#" id="link18" class="video-link">thumbnail</a>
</div>

<div id="video-tab2">
    <a href="#" id="link19" class="video-link">thumbnail</a>
    <a href="#" id="link20" class="video-link">thumbnail</a>
</div>

And here is the JS:

jQuery(".large-video").hide(); //hides all the .large-video divs
jQuery("#video17").show(); // this is the default video to show

jQuery(".video-link").click(function(e){
e.preventDefault();
$(".large-video").hide()
$("#video"+$(this).attr("id").replace("link","")).show();    
 var clone = $(".large-video").clone(true);
$(".large-video").remove();
$(".video-holder").html(clone);
});

Thank you for any help you can provide!!!

Community
  • 1
  • 1
Mel
  • 204
  • 2
  • 13

1 Answers1

1

Here's what I would do:

$(document).ready( function() {
$(".large-video").hide(); //hides all the .large-video divs
$("#video17").show(); // this is the default video to show
$(".video-link").click(function(){
$(".large-video").hide();
$("#video"+$(this).attr("id")).show();    
});
});

and then your links should be:

<div id="video-tab1">
    <a href="#" id="17" class="video-link">thumbnail</a>
    <a href="#" id="18" class="video-link">thumbnail</a>
</div>

<div id="video-tab2">
    <a href="#" id="19" class="video-link">thumbnail</a>
    <a href="#" id="20" class="video-link">thumbnail</a>
</div>

So that basically what it's doing is it waits until the document is ready, then it hides all your video divs and shows your default div (#video17). Then, when you click on a link, it adds the "#video" part already, then it adds the id tag to that, and shows the resulting div. So a link with the id "19" becomes "#video19". I wasn't sure what all the .remove and clone stuff was for, so I skipped it.

Hope this helps, or at least gets you headed in the right direction.

Peter Sorensen
  • 11
  • 1