如何播放在Bootstrap Modal中本地存储的视频？

Question

当用户单击其链接时，我想在Modal中播放视频。

当前情况： 现在，我可以播放此视频，并且一切正常。如下所示：

所需结果： 我想显示“单击此处”文本/按钮，当用户单击它时，视频应弹出并播放。所需的输出是当用户单击链接时应弹出并播放的视频。

问题：

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 }}来自Django。视频仅以 mp4 / mov格式。
3. jQuery