Stepanya

<!-- `<use>` shape defined ON THIS PAGE somewhere else -->
<svg viewBox="0 0 100 100">
   <use xlink:href="#icon-1"></use>
</svg>

<!-- `<use>` shape defined in an EXTERNAL RESOURCE -->
<svg viewBox="0 0 100 100">
   <use xlink:href="defs.svg#icon-1"></use>
</svg>

https://css-tricks.com/svg-use-external-source/

не надо бизнес логику перекладывать на отображение

Гляньте

Поможет ответить

Они наверное у вас в одной папке и у этой папки сбросились права доступа

Вроде как стандарт html5 никак не позволяет непропорционально растягивать видео.
Поэтому вам надо сконвертировать 3 видео для нужных вам разрешений и отдавать их пользователю в зависимости от его разрешения

Учитывая свой опыт я могу предположить, что это возможно

Добавьте тег в head, что-то типа такого

<style>.font { font-family: {{$ctrl.font}};}</style>

У вас какой-то изврат!

Вы вполне можете использовать два-три css файла, если они достаточно толстые

<link rel="stylesheet" href="/css/vendor.css"> // size +100500kb
<link rel="stylesheet" href="/css/init.css"> // size 5kb
<link rel="stylesheet" href="/css/main.css"> // size 500kb

При показе модалки скрывается скроллбар. Уберите

.modal-open {
    overflow: hidden;
}

и паддинг у body