jQuery Аккордеон с YouTube/Soundcloud embed

Question

В настоящее время я работаю над страницей для предстоящих выпусков (музыки). В каждом выпуске есть собственный встроенный просмотр YouTube или Soundcloud. Я хотел бы разместить эти вставки в аккордеонных панелях с автоматическим запуском/остановкой.

Идея:

Содержание аккордеон будет скользить вниз, а встроенный плеер YouTube или Soundcloud будет загружен после нажатия на название аккордеона. Встроенный проигрыватель также будет автоматически запускаться после его загрузки. Встроенный проигрыватель автоматически остановится, если вы откроете другой аккордеон (дорожка).

Я действительно не знаю, как это сделать с помощью jQuery. Надеюсь, вы, ребята, можете мне помочь!

Скриншот:

Просмотр URL:http://dev.wbrnd.nl/hardnews/muziek/

HTML:

<dl class="accordion"> 
    <dt><span>Artist - Title - Label - Cat. ID</span><i class="accordion_icon fa fa-play"></i></dt> 
    <dd class="accordion_content"> 
     YouTube player 1 
    </dd> 
    <dt><span>Artist - Title - Label - Cat. ID</span><i class="accordion_icon fa fa-play"></i></dt> 
    <dd class="accordion_content"> 
     Soundcloud player 1 
    </dd> 
    <dt><span>Artist - Title - Label - Cat. ID</span><i class="accordion_icon fa fa-play"></i></dt> 
    <dd class="accordion_content"> 
     YouTube Player 2 
    </dd> 
    <dt><span>Artist - Title - Label - Cat. ID</span><i class="accordion_icon fa fa-play"></i></dt> 
    <dd class="accordion_content"> 
     Soundcloud player 2 
    </dd> 
</dl> 

Javascript:

jQuery(".accordion dt").click(function() { 
jQuery(this).toggleClass("active").find("i").toggleClass("fa-play fa-stop") 
      .closest("dt").siblings("dt") 
      .removeClass("active").find("i").removeClass("fa-stop").addClass("fa-play"); 

      jQuery(this).next(".accordion_content").stop().slideToggle().siblings(".accordion_content").slideUp(); 

      jQuery(this).next(".youtube").hide(); 
}); 

jQuery(".accordion_content").hide(); 

Answer 1

Вы можете загрузить содержимое каждой вкладки динамически после события Activate называется. Вы можете получить индекс активного элемента с помощью:

accordion("option", "active"); 

Затем вы можете установить атрибут HTML фактической панели на YouTube или код SoundCloud с атрибутом автовоспроизведение включен.

$('.accordion').accordion({ 
activate: function(event, ui){ 
    var aindex= $(".accordion").accordion("option", "active"); 
    $(".accordion dd").eq(aindex).html("Youtube/Soundcloud Code with autoplay here..."); 
} 
}); 

Я тестировал выше на моей странице с гармошкой и изменил вещи, чтобы соответствовать вашим, но вы, возможно, потребуется настроить его немного, чтобы работать для вас.

Сначала необходимо установить значение по умолчанию неактивных вкладок, а также удалить другие видео. Сделайте это в начале функции активации.

, например:

$('.accordion').accordion({ 
activate: function(event, ui){ 
    $(".accordion dd").each(function() { 
     $(this).text("Loading..."); 
    }); 
    var aindex= $(".accordion").accordion("option", "active"); 
    $(".accordion dd").eq(aindex).html("Youtube/Soundcloud Code with autoplay here..."); 
} 
}); 

Вы можете даже хранить коды для каждого YouTube или SoundCloud в массиве и использовать переменную aindex вырывать правильное значение.