Jak zatrzymać wideo na akordeonie

Question

To jest mój pierwszy raz tutaj. Nie jestem tak doświadczony w kodowaniu i robię głównie, kopiując i wklejając z próbą i błędem. To jest link do mojego kodu: JSFiddle.

<!-- ==================================================== --> 
<!-- CONTENTS =========================================== --> 
<!-- ==================================================== --> 
<aside class="accordion"> 

<!-- MAIN BAR #2; #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 --> 
<h1 class="customstyle">Freelance</h1> 
    <div> 

    <!-- SELECTION #3 ==================================================================================== --> 
    <h2 class="customstyle">Project Year (2o13)</h2> 
    <div> 
     <!-- ITEM #1 ================================ --> 
     <!-- ======================================== --> 
     <h3 class="customstyle">Freelance For Company</h3> 
     <div> 

     <!-- SUB-ITEM #3 ========================================================== --> 
     <h4 class="customstyle">JUL-13 | Video Test</h4> 
     <!-- CONTENTS --> 
     <p class="customstyle"> 
      <style> 
      .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
      .embed-container iframe, .embed-container object, 
      .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
      </style> 
      <span class='embed-container' style="display: block;"> 
      <iframe src='https://www.youtube.com/embed/hbmdOzWgyXU?rel=0&showinfo=0&autohide=1&start=0' frameborder='0' allowfullscreen></iframe> 
      </span> 
     </p> 
     </div> 

    </div> 
    </div> 
</aside> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 



<!-- ==================================================== --> 
<!-- ==================================================== --> 
<!-- CSS STYLING ======================================== --> 
<!-- ==================================================== --> 
<style> 
.accordion { 
    width: 100%; 
    margin: 20px auto 0px; 
    padding-bottom: 0; 
} 
.accordion h1, h2, h3, h4 { 
    cursor: pointer; 
} 
p.customstyle { margin: 0; padding-bottom: 3px; } 
h1.customstyle { margin: 0; } 
h2.customstyle { margin: 0; } 
h3.customstyle { margin: 0; } 
h4.customstyle { margin: 0; } 
.accordion h1 { 
    padding: 15px 20px; 
    background-color: #f5c168; 
    font-family: "Abel"; 
    font-size: 1.5rem; 
    font-weight: normal; 
    color: #7F4B49; 
} 
.accordion h1:hover { 
    color: #ffe6bb; 
} 
.accordion h1:first-child { 
    border-radius: 0 0 0 0; 
} 
.accordion h1:last-of-type { 
    border-radius: 0 0 0 0; 
} 
.accordion h1:not(:last-of-type) { 
    border-bottom: 1px dotted #e9a531; 
} 
.accordion div, .accordion p { 
    display: none; 
} 
.accordion h2 { 
    padding: 5px 25px; 
    background-color: #7F4B49; 
    font-size: 1.1rem; 
    /*color: #333;*/ 
} 
.accordion h2:hover { 
    background-color: #7a4543; 
} 
.accordion h3 { 
    padding: 5px 30px; 
    background-color: #FFDDB3; 
    font-family: "Abel"; 
    font-weight: bold; 
    font-size: 15px; 
    color: #393939; 
} 
.accordion h3:hover { 
    background-color: #f5d0a1; 
} 
.accordion h4 { 
    padding: 5px 35px; 
    background-color: #EECEA7; 
    font-family: "Ubuntu" !important; 
    font-size: .9rem; 
    color: #af720a; 
} 
.accordion h4:hover { 
    background-color: #edc89a; 
} 
.accordion p { 
    padding: 15px 35px; 
    background-color: #614140; 
    /*font-family: "Georgia";*/ 
    /*font-size: .8rem;*/ 
    /*color: #333;*/ 
    line-height: 1.6rem; 
} 
</style> 



<!-- ==================================================== --> 
<!-- ==================================================== --> 
<!-- JQUERY SCRIPTS ===================================== --> 
<!-- ==================================================== --> 
<script> 
var headers = ["H1","H2","H3","H4","H5","H6"]; 

$(".accordion").click(function(e) { 
    var target = e.target, 
     name = target.nodeName.toUpperCase(); 

    if($.inArray(name,headers) > -1) { 
    var subItem = $(target).next(); 

    //slideUp all elements (except target) at current depth or greater 
    var depth = $(subItem).parents().length; 
    var allAtDepth = $(".accordion p, .accordion div").filter(function() { 
     if($(this).parents().length >= depth && this !== subItem.get(0)) { 
     return true; 
     } 
    }); 
    $(allAtDepth).slideUp("fast"); 

    //slideToggle target content and adjust bottom border if necessary 
    subItem.slideToggle("fast",function() { 
     $(".accordion :visible:last").css("border-radius","0 0 0 0"); 
    }); 
    $(target).css({"border-bottom-right-radius":"0", "border-bottom-left-radius":"0"}); 
    } 
}); 
</script> 

Próbuję zatrzymać odtwarzanie wideo po zamknięciu akordeonu lub wybraniu innego. Zasadniczo, gdy okno zawierające wideo zostanie zamknięte, wideo zatrzyma się.

Proszę o pomoc?

Answer 1

Aby załadować wideo, musisz mieć do dyspozycji plik YouTube Iframe API, aby mieć dostęp do sterowania filmem za pomocą Javascript.

Innym sposobem na zrobienie tego, czego nie polecam, ale będzie działać z twoim aktualnym kodem, jest usunięcie elementu z blisko akordeonu, zapisanie gdzieś adresu URL wideo, a następnie ponowne dodanie wideo, aby było w jego oryginalnym stanie, oczywiście nie będzie to trwały czas na wideo, w którym użytkownik był gotowy.

jQuery, coś takiego może działać:

<h4 class="customstyle" data-video="https://www.youtube.com/embed/hbmdOzWgyXU?rel=0&showinfo=0&autohide=1&start=0" style="border-radius: 0px;">JUL-13 | Video Test</h4> 

Następnie wewnątrz zdarzenia click można przełączać klasy do określenia, czy ta część jest otwarta i jeśli ma film z atrybutu danych wideo. Jeśli sekcja jest nieaktywna (wysuń w górę), usuń kod elementu iframe i ponownie dołącz go do adresu URL z atrybutu danych.

$(this).toggleClass('active'); 

if (typeof $(this).attr('data-video') !== typeof undefined && $(this).attr('data-video') !== false && !$(this).hasClass('active')) { 
    // has the video attribute and accordion has been closed (doesn't have the active class) 
    var videoUrl = $(this).attr('data-video'); 
    $(subItem).find('.embed-container iframe').remove(); 
    $(subItem).find('.embed-container').append($('<iframe src="'+ videoUrl +'?rel=0&showinfo=0&autohide=1&start=0" frameborder="0" allowfullscreen></iframe>')); 
}