Динамическое модальное содержимое - youtube?

У меня глупый вопрос.

У меня есть данные, поступающие из представления Django - в нем есть столбец, который включает URL YouTube.

На данный момент я перебираю в цикле навыки & создаю модальное окно для каждого. Затем, когда вы нажимаете на элемент, открывается соответствующий модал.

Однако, когда у вас 100 предметов, это немного глупый подход

Может быть, кто-то знает лучший способ сделать это? Я все еще хочу, чтобы видео встраивалось в модал - но видео должно быть динамически установлено, основываясь на выбранном элементе. Спасибо!!!

    {% for skill in skill_list %}





<div class="modal fade" id="{{ skill.skill_id }}" 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">{{ skill.skill_name }}</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/{{skill.syllabus}}" 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> 

Вернуться на верх