Александр Алексеев

path к видео пустой
это норм?

сохраняй весь код в utf8
всегда

а что выводится вместо переменной?
если {$details_url} то посмотрите не обернут ли код в {literal}

задавайте все размеры в процентах

как говорят выше clip-path или mask
по сылке ниже приведены все варианты использования этой технологии
можно открыть в разных браузерах и посмотреть как срабатывает
внизу страницы написаны рабочие кроссбраузерные варианты
https://lab.iamvdo.me/css-svg-masks/

задать минимальную ширину для .wrapper или .container или .content или что там у вас

MDN наше все

position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
max-width: 100%;

1) нет не будет) как-то дурачились на работе и проверили это) была даже мысль что это 8битные значения и 256 классов победят ID, но нет =)
2) important в атрибуте style не перебьет ничто) не делайте так никогда
3) нет, самый слабый файл, потом тег

мне всегда помогал метод .stop() без аргументов но лучше конечно на цсс

тот что умеет кешировать состояния фильтров
или к которому сам сможешь кеш написать

[type=checkbox]:checked + .my_block {}
в этом вся магия

не используйте left right (при таком подходе происходит рефлоу всей страницы на каждый пиксель анимации, при большом количестве элементов все начнет тормозить)
расположите все облака по центру и сместите отдельные с помощью transform: translateX(***px);
и анимируйте тоже transform

есть например такой компонент в бутстрапе (называется scrollspy) но можно наверное и отдельно найти или просто бутстрап закостомизить

к картинке
object-fit: cover

<form>
    <label>
        <div>Нравится</div>
        <div>+15</div>
        <input type="submit">
    </label>
</form>