Денис Шевченко

Вот сам недавно использовал:
https://scaleflex.github.io/js-cloudimage-360-view/

Расстояние между максимальной и минимальной высотой берём за 100%. При скроле смотрим на сколько человек ушел от минимума к максиму в процентах и задаём столько же в значение opacity, только не забываем что opacity принимает значение от 0 до 1.

В yii gridView формируется средствами php. Так что сделать через js не выйдет. Существуют js библиотеки для построения таблиц, но это уже совсем другое.

Для отправки формы с файлами на js лучше использовать formData
https://developer.mozilla.org/ru/docs/Web/API/FormData
Остальные манипуляции зависят только от вас

Может сделать из видео гиф, и на мобильниках показывать gif вместо видео на фоне.

infinite: true

1. Отправляешь Аяксом данные из формы на сервер
2. На стороне сервера проверяешь валидность логина и пароля и отправляешь json ответ
3. В callback функции success проверяешь значение ответа и выводишь соответствующий блок

div{
min-height: 100vh;
}

Ну если на скорую руку

<div data-iframe="<iframe src='...'>...</iframe>">Кликни на меня</div>

$("[data-iframe]").click(function () {
    $(this).html($(this).attr("data-iframe"));
});

Проверьте, достоверны ли пути к файлам(например jquery вы берете с серверов гугла, а сама либа должна обязательно быть у вас в папке js), посмотрите в консоль на наличие ошибок, если все нормально то попробуйте инициализацию через js в $(document).ready(...);, а не через data атрибуты.