Полные требования лучше прочесть здесь. Ниже я постарался я их повторить, но не все поместилось. Например, обрезались картинки

Итак, задача

То, что я хочу сделать вдохновлено сервисом https://www.woodpeckerlearning.com/

Чтобы легче и быстрее понять мою задачу, рекомендую скачать мобильное приложение IOS или Android и посмотреть, например, вот этот ролик. Для этого после установки приложения (обязательно) просто нажмите на эту ссылку на том же устройстве

Итак, задача. Ниже я описал на примере https://www.woodpeckerlearning.com/ Мое описание почти в точности совпадает с тем, как это сейчас работает у них, но небольшие отличия все-таки есть

1. У ребят сделаны приложения. Нам нужно сделать все в вебе. Так, чтобы верстка адаптировалась под разные экраны
2. Область воспроизведения видео
3. При нажатии текущая реплика зацикливается и бесконечно повторяется до тех пор, пока не нажмешь на другую область экрана
4. Перемотка назад на 5 секунд
5. Снижение скорости воспроизведения до 0.75
6. Чекбокс показывать/нет русские субтитры. Если чекбокс выбран, то русская реплика идет строго под английской в том же цветовом окне.
7. Область субтитров. Можно скролить вверх или вниз, чтобы увидеть предшествующие или последующие субтитры
8. Выделена цветом текущая реплика. Она всегда находится наверху, прямо под видео, если в этот момент вы не скролите субтитры. Если скролите, то через 2 секунды текущая реплика снова закрепляется под видео
9. Если вы нажимаете на зону тайм-кода, то видео перематывается на начало этой реплики
10. Если нажимаете на любое слово, то видео останавливается и всплывает окно с переводом. Код с переводчиком я предоставлю
11. Eсли закрыть окно с переводом, то воспроизведение видео продолжится

1. Ширина контейнера с видео равна ширине окна всегда, когда это возможно. Если невозможно (например, из-за пункта указанных мною ниже), то ширина просто максимальная
2. Снизу мы всегда имеем ровно 5 реплик. Ширина окна с репликами равна ширине контейнера с видео.

Мне нужен код, который я самостоятельно буду использовать при верстке разных страниц. Я буду делать это почти всегда в Тильде. В этом конструкторе блочная система. Все блоки располагаются строго один под другим. Если в библиотеке блоков нет того, что нужно пользователю, то на этот случай есть блок с HTML-кодом, куда можно вставить все что хочется. Туда я и буду вставлять код внутри которого будет в том числе прямая ссылку на видео и файлы с субтитрами