与视频元素叠加时，按钮项目变得不可点击

Question

我正在尝试构建网格选择按钮，当用户点击1x1时，只会显示一个视频。

我遇到的问题是我的下拉按钮位于视频上方，当它与视频重叠时，它的按钮元素变得无法点击。

正如您所看到的，1x1只能在视频上方的那个小区域内点击，它对2x2和3x3完全无法点击。

我做了一些广泛的阅读，并且已经了解到HTML不允许在视频上方堆叠的元素进行交互。

根据此article，解决此问题的方法之一是在视频上方引入一个图层并暂停视频并让图层可见。然后只能单击该按钮。

代码段

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding: 5px 30px 0 0;">
            <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                <button onclick="myFunction()" class="dropbtn drop">
                  Select Grid
                  <b class="caret"></b>
                </button>
                <div id="myDropdown" class="dropdown-content">
                  <a href="#">1x1</a>
                  <a href="#">2x2</a>
                  <a href="#">3x3</a>
                </div>
              </li>
            </ul>
        </div>

还有其他解决方案吗？