Databases
StackOverflow2013
Postsdbo
POjquery tab content with show/hide of youtube videos
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery tab content with show/hide of youtube videos
    text
    copied!<p>I have a video section that is setup as follows:</p> <p>One video shows up by default when the page loads</p> <p>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. </p> <p>I'm using a bit of code I found here: <a href="https://stackoverflow.com/questions/1806032/flash-video-still-playing-on-div-that-is-removed-using-jquery-ie-bug/2828289#2828289">Flash video still playing on DIV that is removed using jQuery (IE bug)</a> - 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. </p> <p>Now in IE9, the first tab column of videos will not swap out. The second tab column however will. </p> <p>This is the HTML:</p> <pre><code>&lt;div class="video-holder"&gt; &lt;div id="video17" class="large-video" style="display: none;"&gt; &lt;div class="embed-video"&gt;the video&lt;/div&gt; &lt;/div&gt; &lt;div id="video18" class="large-video" style="display: none;"&gt; &lt;div class="embed-video"&gt;the video&lt;/div&gt; &lt;/div&gt; &lt;div id="video19" class="large-video" style="display: none;"&gt; &lt;div class="embed-video"&gt;the video&lt;/div&gt; &lt;/div&gt; &lt;div id="video20" class="large-video" style="display: none;"&gt; &lt;div class="embed-video"&gt;the video&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#video-tab1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#video-tab2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="video-tab1"&gt; &lt;a href="#" id="link17" class="video-link"&gt;thumbnail&lt;/a&gt; &lt;a href="#" id="link18" class="video-link"&gt;thumbnail&lt;/a&gt; &lt;/div&gt; &lt;div id="video-tab2"&gt; &lt;a href="#" id="link19" class="video-link"&gt;thumbnail&lt;/a&gt; &lt;a href="#" id="link20" class="video-link"&gt;thumbnail&lt;/a&gt; &lt;/div&gt; </code></pre> <p>And here is the JS:</p> <pre><code>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); }); </code></pre> <p>Thank you for any help you can provide!!!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload