Как остановить видео iframe при переключении на другую вкладку

[AndreyM]

Всем привет!

Есть обычный скрипт табов с видео. Как сделать, чтобы при переключении на другую вкладку другая просто отключалась и не воспроизводилось видео?

Спойлер: Стили

ul, ol {    list-style: none;}
    .clearfix:before, .clearfix:after {content: " "; display: table;}
    .clearfix:after {clear: both;}
    .wrapper {height:100%;width:800px; margin:0 auto;padding:200px 0}
    .tabs-video {overflow:hidden;}
    .tabs-videobox {position:relative; overflow:hidden; z-index:302;background:#000}
    .tabs-videonav {overflow:hidden; margin:0 0 20px 0; float:right;}
    .tabs-videonav li {float: left;}
    .tabs-videonav li a {display:block; color: #fff; height: 30px; font-size: 13px; padding: 0 14px; font-weight: 700; line-height: 30px; text-transform: uppercase;border-right:1px solid #989CA5; background-color: #7e8594;}
    .tabs-videonav li:first-child a {border-top-left-radius:2px; border-bottom-left-radius:2px;}
    .tabs-videonav li:last-child a {border-top-right-radius:2px; border-bottom-right-radius:2px; border-right:none;}
    .tabs-videonav li a:hover {color: #fff;  background-color: #989CA5;}
    .tabs-videonav li a.selected, .tabs-videonav li a:hover.selected {color: #fff; background-color: #f26739;}
    iframe {width:100%;height:450px;}

<div class="wrapper">
<div class="tabs-video">
      <ul class="tabs-videonav">
          <li><a href="#ts1">Плеер 1</a></li>
          <li><a href="#ts2">Плеер 2</a></li>
      </ul>
      <div class="clearfix"></div>
      <div class="tabs-videobox" id="ts1">
          <div class="video-responsive">
            <iframe width="612" height="344" src="https://www.youtube.com/embed/Tgk_63b-Mrw?feature=oembed" frameborder="0" allowfullscreen></iframe>
          </div>
      </div>
      <div class="tabs-videobox" id="ts2">
          <div class="video-responsive">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/RWCQ22JyCL4" frameborder="0" allowfullscreen></iframe>
          </div>
      </div>
  </div>
</div>

$(document).ready(function(){
    var tabContainers = $('.tabs-video .tabs-videobox');
        tabContainers.hide().filter(':first').show();
        $('.tabs-video .tabs-videonav a').click(function () {
            tabContainers.hide();
            tabContainers.filter(this.hash).show();
            $('.tabs-video .tabs-videonav a').removeClass('selected');
            $(this).addClass('selected');
            return false;
        }).filter(':first').click();
});

Может подскажите как реализовать остановку видео?

Вот тут пример набросал - https://jsfiddle.net/Ly0wn4ws/ , там сейчас видео с ютуба, не обращайте внимания, будет стоять мунволк, хдго и другие iframe


P.S. Знаю, что нужно вот эти строки как-то прикрутить к скрипту табов, но не знаю как вообще, так как в квери вообще не бум-бум)

  var iframe = $(e.relatedTarget.hash).find('iframe');
  var src = iframe.attr('src');
  iframe.attr('src', '');
  iframe.attr('src', src)

 

[Seopirat]

Напиши напрямую кодерам, может за пивасик кто сделает

 

[yuris]

есть уже готовые табы с такой функцией, загуглить надо просто. Вот например: https://itchief.ru/lessons/bootstrap-3/100-bootstrap-3-dynamic-tabs там в комментах админ рассказывает как это сделать...

 

[AlexSPNet]

Сделал простую модификацию в вашем примере https://jsfiddle.net/Ly0wn4ws/1/
Если хочешь ставить на паузу нужен плеер с api, например для youtube можно uppod, у moonwalk есть iframe api, чтобы запустить с нужного времени.

 

[AndreyM]

есть уже готовые табы с такой функцией, загуглить надо просто. Вот например: https://itchief.ru/lessons/bootstrap-3/100-bootstrap-3-dynamic-tabs там в комментах админ рассказывает как это сделать...

Для табов от бутстрап у меня есть скрипт, но они не подходят так как в них обязательно должно выводится определенная вкладка.

 

[AndreyM]

Сделал простую модификацию в вашем примере https://jsfiddle.net/Ly0wn4ws/1/
Если хочешь ставить на паузу нужен плеер с api, например для youtube можно uppod, у moonwalk есть iframe api, чтобы запустить с нужного времени.

Спасибо, сейчас буду ставить и тестировать)

 

[Frosty]

Вот тут реализовано вот это http://kinogoo.club/templates/def3/st/js.js