I have a site, where I loop through a bunch of data & produce a button for each element.

I have set the button value for each, to be the unique youtube video URL

<button type="button" class="btn btn-outline-primary mb-1" data-bs-toggle="modal" data-bs-target="#Zdq6f4RXJt" value="#Zdq6f4RXJt">Video</button>

I then have a modal for each video. Which is not optimal.

How can I pass the value from the button into the modal?

Thanks a lot

 <div class="modal fade" id="Zdq6f4RXJt" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog modal-semi-full modal-dialog-centered">
                              <div class="modal-content">
                                <div class="modal-header">
                                        <h5 class="modal-title">Introduction to MongoDB</h5>
                                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/**Zdq6f4RXJt**" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                        </div>
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                </div> 
                              </div>
                            </div> 
                          </div>