Execute the same javascript function from different onclick events [duplicate]

Question

I have the following javascript code that plays a video when I click the "play" button in HTML.

How can I play different videos (multiple play buttons in HTML) without duplicating the JavaScript code?

$('#video-icon').on('click', function(e) {
  e.preventDefault();
  $('.video-popup').css('display', 'flex');
  $('.iframe-src').slideDown();
});

$('.video-popup').on('click', function(e) {
  var $target = e.target.nodeName;
  var video_src = $(this).find('iframe').attr('src');
  if ($target != 'IFRAME') {
    $('.video-popup').fadeOut();
    $('.iframe-src').slideUp();
    $('.video-popup iframe').attr('src', " ");
    $('.video-popup iframe').attr('src', video_src);
  }
});

<a class="video-section prelative text-center white" role="button" id="video-icon" aria-hidden="true">
  Play
  <div class="video-popup">
    <div class="video-src">
      <div class="iframe-src">
        <iframe src="the video link" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</a>

also :Assigning the same event listener to multiple buttons or Giving Multiple Buttons an EventListener — pilchard
– pilchard, Commented Jan 3 at 10:21

Rory McCrossan · Accepted Answer · 2025-01-03 09:45:53Z

2

To have repeated elements perform the same action you need to use class selectors to target them, not id as the latter have to be unique within the DOM.

From there you can use a data attribute on the popup trigger to store the video location which should be shown in the popup. You can set that as the popup is displayed.

Here's a full working example with some other amendments made to your logic:

const $videoPopup = $('#video-popup');
const $videoContainer = $videoPopup.find('.iframe-src');
const $videoIframe = $videoContainer.find('iframe');

$('.video-icon').on('click', function(e) {
  e.preventDefault();
  $videoPopup.css('display', 'flex');
  $videoContainer.slideDown();
  $videoIframe.prop('src', $(this).data('video-url'));
  console.log(`Showing popup for ${$(this).data('video-url')}...`);
});

$videoPopup.on('click', function(e) {
  var $target = e.target.nodeName;
  if ($target != 'IFRAME') {
    $videoPopup.fadeOut();
    $videoContainer.slideUp();
    $videoIframe.prop('src', '');
  }
});

#video-popup {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<a class="video-icon video-section prelative text-center white" role="button" aria-hidden="true" data-video-url="video-1-location.mp4">
  Play video 1
</a>
<a class="video-icon video-section prelative text-center white" role="button" aria-hidden="true" data-video-url="video-2-location.mp4">
  Play video 2
</a>

<div id="video-popup">
  <div class="video-src">
    <div class="iframe-src">
      <iframe src="the video link" allowfullscreen></iframe>
    </div>
  </div>
</div>

answered Jan 3 at 9:45

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mlri Jan 3 at 10:18

What is the difference between the data-video-url and iframe src ?

Rory McCrossan Jan 3 at 10:34

Not quite sure what you mean. The data attribute is read from the link that is clicked and is used to set the src of the single iframe

Collectives™ on Stack Overflow

Execute the same javascript function from different onclick events [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related