Clickable whitespace underneath every SVG

HTML-CSS
1

There’s clickable whitespace underneath every SVG.

Meaning, when that area is clicked, nothing happens, no video opens.

The whole area inside the box should be clickable.

Full Code: https://jsfiddle.net/fzLcpjrb/

Also, how come there are 2 different mouse cursors when you hover over that area?

How would all of this be fixed?

What’s not written properly in the html if that’s where the issue is?

<svg width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                     <symbol id="play" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
                        <title>Play</title>
                        <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                        <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
                     </symbol>
                  </svg>
                  <svg class="alpha" >
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playinga" data-id="ZPz3wzPlruA"></div>
                  </div>
               </li>
               <li>
                  <svg class="beta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingb" data-id="VFMtNOxpV3o"></div>
                  </div>
               </li>
               <li>
                  <svg class="gamma">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingc" data-id="Zkf4EDjV1_g"></div>
                  </div>
               </li>
               <li>
                  <svg class="delta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingd" data-id="-Xgi_way56U"></div>
                  </div>
               </li>
               <li>
                  <svg class="epsilon">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playinge" data-id="EK3h0IADYrQ"></div>
                  </div>
               </li>
               <li>
                  <svg class="zeta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingf" data-id="YOw9J4K02H4"></div>
                  </div>
               </li>
               <li>
                  <svg class="eta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingg" data-id="ID856YDIb6A"></div>
                  </div>
               </li>
               <li>
                  <svg class="theta">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingh" data-id="9Gn8ymkrlbI"></div>
                  </div>
               </li>
               <li>
                  <svg class="iota">
                     <use href="#play" />
                  </svg>
                  <div class="hide">
                     <div class="video playingi" data-id="qYEooPeyz5M"></div>
                  </div>
2

There’s clickable whitespace underneath every SVG.
I can not find any whitespace in the link u have provided?
But if u want to make the entire area clickable u can ahref a div

Also, how come there are 2 different mouse cursors when you hover over that area?
I cannot seem to replicate this error?
but if ure refering to the changing mouse thats because its set to change
if u like to change it to something else simply remove this in ure CSS code
or https://www.w3schools.com/cssref/pr_class_cursor.asp for other mouse options