Как воспроизвести видео, хранящееся локально в Bootstrap Modal?

Question

Я хочу воспроизвести видео в модальном режиме, когда пользователь нажимает на его ссылку.

ТЕКУЩАЯ СИТУАЦИЯ: Сейчас я могу воспроизвести это видео, и все работает отлично.Это выглядит так:

Желаемый результат: Я хочу показать текст / кнопку «щелкнуть здесь» и когда пользовательнажимает на нее, видео должно всплыть и воспроизвести.Желаемый вывод - это видео, которое должно всплывать и воспроизводиться, когда пользователь нажимает на ссылку.

ПРОБЛЕМА:

1. Всякий раз, когда я загружаю страницу, она пытается загрузить все видео.
2. При нажатии «нажмите здесь» открывается пустое модальное

КОД:

<td scope="row">
    <div class="productVideo">
        <a href="#videoModal" data-toggle="modal">
            Click here
        </a>
        <!-- Modal HTML -->
        <div id="videoModal" class="modal fade">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" id="video" src="{{ item.video_url }}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>

Используемые технологии:

1. Bootstrap 4
2. {{ item.video_url }} исходит от Джанго.Видео только в формате mp4 / mov .
3. JQuery