Accordion'da Video Durdur Nasıl Yapılır

Question

Bu benim ilk kez burada. Kodlamada gerçekten deneyimli değilim ve işleri çoğunlukla deneme ve hata ile kopyalayıp yapıştırarak yapıyorum.

Kodumun bağlantısı: 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> 

Akordeon kapatıldığında veya başka bir seçildiğinde videom oynatmayı durdurmaya çalışıyorum. Temel olarak, videoyu içeren kutu kapatıldığında, video durur.

Herhangi bir yardım lütfen?

Answer 1

Javascript ile video denetimlerine erişmek için videonuzu yüklemek için YouTube Iframe API kullanmanız gerekir.

Bunu önermemenin başka bir yolu da, geçerli kodunuzla çalışacak olursak, öğeyi akordeonun yakınından kaldırmak, video URL'sini bir yere saklamak ve daha sonra videoyu yeniden eklemek Orijinal halindeyse, elbette ki bu, kullanıcının bulunduğu videoda kalıcı bir süre olmayacaktır.

<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> 

Sonra click olayı içine o bölümü açık olup olmadığını belirlemek için bir sınıf geçiş yapabilirsiniz ve veri-video özniteliği bir video varsa: jQuery kullanarak

, böyle bir şey işe yarayabilir. Bölüm etkin değilse (yukarı kaydırın) iframe kodunu kaldırın ve veri niteliğinden URL ile yeniden ekleyin.

$(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>')); 
}