WebEagle

document.addEventListener("DOMContentLoaded", function(event) { 
    const focusElement = document.querySelector('.brz-tabs__item--content ');
    if (focusElement) {
        focusElement.focus();
    }
});

td {
    vertical-align: top;
}

Класс адаптируйте под свою таблицу

когда срабатывает hover проверять у элемента tagName и сравнивать его с 'A' или "BUTTON' можно еще, и тогда изменять размер следящего элемента

<a href="'.$directory.'/'.$row['video_name'].'">
  <video width="100%" height="100%" src="'.$directory.'/'.$row['video_name'].'">'.$row['title'].'</video><span class="time">3:15</span></a>

у ссылки должны быть стили:
position: relative;
display: inline-blok; /* или block*/

тогда video тянет a под свои размеры, а span с таймером можно позиционировать через absolute

из .box нужно убрать position: absolute; или сделать position: relative;

И вообще absolute нужно обдуманно использовать, в вашем примере я бы вообще избавился