Button items become unclickable when overlay with video element

Question

I'm trying to build a grid selection button where when user clicks 1x1, then only one video will be display.

The problem I'm having is my drop down button is placing above the videos and it's button elements become unclickable when it overlays with the videos.

As you can see 1x1 is only clickable within that small area above the video, it became totally unclickable for 2x2 and 3x3.

I have done some extensive reading and have came to an understanding that HTML is not allowing interaction of elements that are stacking above the video.

According to this article, One of the ways to resolve this problem is by introducing a layer above the videos and pausing the video and let the layer to be visible. Then only the button can be clicked.

Code snippet

<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>

Is there another solution?