How To Stop A Video On Accordion

Question

This is my first time here. I'm not really that experienced in coding and I do things mostly by copying and pasting with trial and error.

Here is the link to my code: 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>

I'm trying to make my video stop playing when the accordion is closed or another is selected. Basically, when the box that contains the video is closed, the video stops.

Any help please?

I think this is a similar question, [check out this answer](http://stackoverflow.com/questions/2128535/stop-a-youtube-video-with-jquery) — asonnenshine, Aug 10 '16 at 04:26
I tried copy and pasting the various solutions with trial and error but nothing works... Can you help me please? — Jay, Aug 10 '16 at 15:33
Sorry about that! I kept trying and magically got it working! Thanks for the link :) — Jay, Aug 10 '16 at 15:42

score 0 · Answer 1 · answered Jan 16 '17 at 13:40

You would need to use the YouTube Iframe API to load your video, in order to have access to the video controls with Javascript.

Another way to do it, which I don't recommend, but would work with your current code is to remove the element on close of the accordion, store the video URL somewhere and then re-add the video so it is in it's original state, of course this will not keep a persistent time on the video where the user was up to.

Using jQuery, something like this could work:

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

Then inside your click event you can toggle a class to define whether that section is open and if it has a video from the data-video attribute. If the section is inactive (slide up), then you remove the iframe code and re-append it with the URL from the data attribute.

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

How To Stop A Video On Accordion

1 Answers1