Trying to condense JavaScript / jQuery code

Question

I am trying to condense my code in order to implement the DRY principle, I have played around with the code a bit and manage to condense some of it but not all.

The area I am looking to condense is the lines with the code:

$("#modal").on("hidden.bs.modal", function() {}

As you can see this is repeated throughout the file and I do not believe this is best practice. I have tried to place this in a function itself but the problem I have is that when I close the video it still continues to play.

Not sure if the code can be reduced any further so thought I would ask for advice.

// Video Play
$(function() {
 // Auto Play Modal Video
 $(".video").click(function() {
 var theModal = $(this).data("target"),
 videoSRC = $(this).attr("data-video"),
 videoSRCauto =
 videoSRC +
 "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
 $(theModal + " video").attr("src", videoSRCauto);
 });
 $("#videoModal").on("hide.bs.modal", function() {
 $("video").attr("src", "");
 });
});
function video(vid) {
 $(vid).attr("src", $(vid).attr("src"));
}
$("#modal1").on("hidden.bs.modal", function() {
 video("#modal1 video");
});
$("#modal2").on("hidden.bs.modal", function() {
 video("#modal2 video");
});
$("#modal3").on("hidden.bs.modal", function() {
 video("#modal3 video");
});
$("#modal4").on("hidden.bs.modal", function() {
 video("#modal4 video");
});
$("#modal5").on("hidden.bs.modal", function() {
 video("#modal5 video");
});
$("#modal6").on("hidden.bs.modal", function() {
 video("#modal6 video");
});
$("#modal7").on("hidden.bs.modal", function(e) {
 video("#modal7 video");
});

• CertainPerformance: Is "hidden.bs.modal" an oddly named custom event, or did you forget an event name in event delegation, like .on('click', 'hidden.bs.modal', ...?

Answer 1

Use classes instead of IDs, and then you can select the video descendant dynamically, and pass it to video. For example, using a class name of .modal instead of #modal1, #modal2, ...:

function video($vid) {
 $vid.attr("src", $vid.attr("src"));
}
$(".modal").on("hidden.bs.modal", function() {
 video($(this).find('video'));
});

• Coder: wow, can't believe how quickly you answered that. I've been trying to work it out for over an hour now! Makes perfect sense, should have looked to target a class and use $this. Thanks!
• Jeto: I would (personally, at least) argue that using data- attributes as JS/jQuery selectors and leaving classes for CSS only is better practice.
• CertainPerformance: @Jeto That's the first time I've heard that, sounds a bit odd but not that odd, do you have a link or something I can look at to read an argument for it?
• Jeto: @CertainPerformance css-tricks.com/stop-using-css-selectors-non-css for instance. There's several arguments, but the main one is to keep styling and scripting as separate as possible. Also justmarkup.com/log/2017/07/… (which is linked from the previous one).