How to stop the video on the accordion

Question

This is my first time here. I am not very good at coding, and I do this mainly 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 am trying to turn off video playback when the accordion is closed or another is selected. Basically, when the window containing the video closes, the video stops.

Any help please?

Answer 1

You will need to use the YouTube iframe API to upload your video in order to access the video controls using Javascript.

Another way to do this, which I do not recommend, but will work with your current code, is to delete the element at the end of the accordion, save the URL of the video somewhere, and then add the video again so that it is this original state, of course, this is not will maintain constant time on the video the user was in before.

Using jQuery, something like this might 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 switch the class to determine if this section is open and whether it has a video from the data-video attribute. If the section is inactive (slide up), you delete the iframe code and re-add 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>')); }