点击按钮然后出现弹框播放视频

好的，这个功能可以通过 JavaScript 来实现。你可以在按钮的点击事件中添加以下代码：

var videoUrl = "视频地址"; // 替换为你的视频地址
var modalHtml = '<div id="myModal" class="modal">' +
                '<div class="modal-content">' +
                '<span class="close">&times;</span>' +
                '<video controls>' +
                '<source src="' + videoUrl + '" type="video/mp4">' +
                '</video>' +
                '</div>' +
                '</div>';

// 将弹框 HTML 插入到页面中
document.body.insertAdjacentHTML('beforeend', modalHtml);

// 获取弹框元素和关闭按钮元素
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];

// 点击按钮打开弹框
document.getElementById("播放视频按钮ID").onclick = function() {
    modal.style.display = "block";
}

// 点击关闭按钮或弹框以外的区域关闭弹框
span.onclick = function() {
    modal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

其中，`videoUrl` 是视频的地址，`播放视频按钮ID` 是触发弹框的按钮的 ID。

以上代码会在页面底部插入一个弹框 HTML，然后获取弹框元素和关闭按钮元素，最后添加打开和关闭弹框的事件监听器。当用户点击按钮时，弹框会显示视频。用户点击关闭按钮或弹框以外的区域时，弹框会关闭。