尝试突出显示所选的div并在隐藏div时自动暂停youtube视频

Question

TL; DR DEMO HERE - http://jsfiddle.net/ZcMkt/492/

希望有人可以提供帮助，因为这会煎炸我的大脑。

我正在构建一个视频页面，其中嵌入了5个YouTube视频。一次只能看到其中一个视频。有顶部导航（选择每个视频）和侧面导航（再次选择视频）。除此之外，底部还有导航（视频div下方），用于选择视频内容或显示隐藏的div（以替换视频div）和包含照片的div。

所以我遇到的问题：

1）。当通过导航选择另一个视频时，我无法让视频自动暂停

2）。选择时，顶部导航和侧面导航（与视频相同的链接）不会一起突出显示。

3）。当选择底部导航（用于照片）时，我无法弄清楚如何禁用视频链接（5）并用5个照片div替换这些链接。

HTML
====
<div class="Video">

<div class="VideoTop">
<ul class="nav-tabs">
<li class="active"><a href=".tab1">Tab 1</a></li>
<li><a href=".tab2">Tab 2</a></li>
<li><a href=".tab3">Tab 3</a></li>
<li><a href=".tab4">Tab 4</a></li>
<li><a href=".tab5">Tab 5</a></li>
</ul>
</div>

<div class="VideoSide">
<ul class="nav-tabs">
<li class="active"><a href=".tab1">Tab 1</a></li>
<li><a href=".tab2">Tab 2</a></li>
<li><a href=".tab3">Tab 3</a></li>
<li><a href=".tab4">Tab 4</a></li>
<li><a href=".tab5">Tab 5</a></li>
</ul>
</div>

<div id="video-div">
<section class="tab-content tab1 active">
<iframe id="player1" width="350" height="197" src="//www.youtube.com/embed/dg4rylxSg5c?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</section>

<section class="tab-content tab2 hide">
<iframe id="player2" width="350" height="197" src="//www.youtube.com/embed/IQgS3lcpWLQ?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</section>

<section class="tab-content tab3 hide">
<iframe id="player3" width="350" height="197" src="//www.youtube.com/embed/E07tybE1sPE?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</section>

<section class="tab-content tab4 hide">
<iframe id="player4" width="350" height="197" src="//www.youtube.com/embed/FZ5Ua0e2ZIw?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</section>

<section class="tab-content tab5 hide">
<iframe id="player5" width="350" height="197" src="//www.youtube.com/embed/ZpAEWbopYl8?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</section>

<section class="tab-content tab6 hide">
<a href="link1.html"><img src="http://www.clickerzoneuk.co.uk/cz/wp-content/uploads/2010/10/PuppySmall.jpg" /></a>
<a href="link2.html"><img src="http://www.clickerzoneuk.co.uk/cz/wp-content/uploads/2010/10/AkitaPuppies-300x162.jpg" /></a>
<a href="link3.html"><img src="http://www.clickerzoneuk.co.uk/cz/wp-content/uploads/2010/10/DogBathing-300x198.jpg" /></a>
</section>


</div>

<div class="viewTabs">
<ul class="nav-tabs">
<li class="active"><a href=".tab1">View Video</a></li>
<li><a href=".tab6">View Photos</a></li>
</ul>
</div>

<section class="tab-content tab1 active">
<div class="Box1">
<p>Text box 1</p>
</div>
</section>

<section class="tab-content tab2 hide">
<div class="Box2">
<p>Text box 2</p>
</div>
</section>

<section class="tab-content tab3 hide">
<div class="Box3">
<p>Text box 3</p>
</div>
</section>

<section class="tab-content tab4 hide">
<div class="Box4">
<p>Text box 4</p>
</div>
</section>

<section class="tab-content tab5 hide">
<div class="Box5">
<p>Text box 5</p>
</div>
</section>

</div>

CSS
====

.Video  {background:#000;  padding: 15px;}
.VideoTop   {margin-bottom:15px}
.VideoTop ul    {margin-bottom: 5px;}
.VideoTop li    {display: inline;font-size: 14px;}
.VideoTop a {background: #434343; text-transform:uppercase}
.VideoSide {float:right; width:32%;}
.VideoSide li {display: block;margin-bottom: 1px;}
.VideoSide a    {background: #434343; text-transform:uppercase}
.viewTabs   {background:#000;  padding: 5px;}
.viewTabs ul    {margin-top:5px}
.viewTabs li    {display:inline; font-size:14px;}
.viewTabs a {background:#434343; text-transform:uppercase; padding:5px;}
.nav {list-style: none;}
.nav > li > a {display: block;}
.VideoSide a    {padding: 26px 20px 18px 20px;display: block;height: 25px;}
.VideoTop a {padding: 7px 16px 7px 15px;display: inline;}
.nav-tabs > .active > a {color: #fff;cursor: default;background-color: #666;}
.nav-tabs a:hover   {background:#000;color:#fff;}
.tab-content.active {display: block;}
.tab-content.hide {display: none;}
#video-div  {min-height:350px;} 
#video-div  img {margin:15px}
img.rightFloat  {float:right}

JQUERY
======

$(document).ready(function() {
    $('.nav-tabs > li > a').click(function(event){
    event.preventDefault();//stop browser to take action for clicked anchor

    //get displaying tab content jQuery selector
    var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');                  

    //find active navigation and remove 'active' css
    var actived_nav = $('.nav-tabs > li.active');
    actived_nav.removeClass('active');

    //add 'active' css into clicked navigation
    $(this).parents('li').addClass('active');

    //hide displaying tab content
    $(active_tab_selector).removeClass('active');
    $(active_tab_selector).addClass('hide');

    //show target tab content
    var target_tab_selector = $(this).attr('href');
    $(target_tab_selector).removeClass('hide');
    $(target_tab_selector).addClass('active');
     });
  });
$(function() {
/* elt: Optionally, a HTMLIFrameElement. This frame's video will be played,
 *       if possible. Other videos will be paused*/
function playVideoAndPauseOthers(frame) {
    $('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) {
        var func = this === frame ? 'playVideo' : 'pauseVideo';
        this.contentWindow.postMessage('{"event":"command","func":"' + func +         '","args":""}', '*');
    });
}
$('.ultimateOrgasmVideo a[href^=".tab"]').click(function() {
    var frameId = /.tab(\d+)/.exec($(this).attr('href'));
    if (frameId !== null) {
        frameId = frameId[1]; // Get frameId
        playVideoAndPauseOthers($('#video-div' + frameId + ' iframe')[0]);
    }
});
});