Aricus

Ещё можно сначала загрузить страницу, а потом по ajax подтягивать видео, вместе, или по одному, как лучше для восприятия страницы.

Можно у каждой optgroup подсчитать количество дочерних option и количество дочерних option с классом hidden. Если количество совпадает, скрыть. Если через show/hide скрывать option, тогда нужно будет проверять css, что сложнее (навскидку не знаю, можно ли это сделать без цикла).

Как узнать при сколе на какой странице находишься в данный момент?

Сохранять или в get-параметрах, сессиях/куки или js переменных, в зависимости от механизма работы. И выводить при необходимости. Я только не понял, что в данном контексте означает "скол".

Как осуществить переход по страницам?

При нажатии на кнопки пагинации или при скроле до верхнего/нижнего края какого-то блока будет происходить переход на другую страницу, или срабатывание ajax, или срабатывание простого js-скрипта, опять же в зависимости от механизма.

Проще всего уменьшать весь пазл целиком. Вот моё решение похожей задачи, мне нужно было адаптировать карусель:

@media only screen and (max-width: 1024px)
.bee3D--effect__carousel {
    transform: scale(0.9);
    margin: -38px 0;
}
@media only screen and (max-width: 786px)
.bee3D--effect__carousel {
    transform: scale(0.8);
    margin: -65px 0;
}
@media only screen and (max-width: 610px)
.bee3D--effect__carousel {
    transform: scale(0.67);
    margin: -93px 0;
}
@media only screen and (max-width: 480px)
.bee3D--effect__carousel {
    transform: scale(0.55);
    margin: -120px 0;
}

А что если сделать всё после load? Сначала ваши скрипты, а потом импортировать скрипты ВК прямо внутри скрипта с помощью
@import url("");

Можно разбить фразу по пробелу через split, а потом уже каждую часть разбивать на буквы, и работать с ними отдельно. Например, задать конечную точку анимации на 1em ниже. Извините, вникать не буду, слишком сложно. Да и переменные названы 1-2 буквами, из-за этого не понятно, что это такое.

Сохранить данные или само окно в сессию или куки.

Перебирайте массив через foreach. Если элемент, куда хотите добавить, не существует, создайте его. В вашем случае, это нужно сделать два раза, сначала с верхним, а потом с нижним уровнем. Потом добавляйте элемент.

За предотвращение действия по умолчанию отвечает функция event.preventDefault
Также советую перейти с чистого js на jquery, работа в DOM с ним гораздо удобнее.

// следующий раз вызываем себя, когда закончится текущая секунда
setTimeout(update, millis);

Нужно написать для этой команды условие. За правильность не ручаюсь, тестировать не буду, но примерно так:

if ((diff < 1000) || (cur - baseTime > 24*60*1000)) {
  setTimeout(update, millis);
}

Первоначально окно нужно скрыть под

#container1 {
  display: none;
}

Ajax нужно подвесить на клик по ссылке (которую нужно сделать не ссылкой, а чем-то другим, чтобы страница не обновлялась), а после отработки добавить класс для проявления (кстати, рекомендую изучить jquery: для работы с html в разы проще чистого js):

$('[data-reveal-id="myModal"]').click(function() {
  jQuery.ajax({
    url: "mod1.html",
    dataType: "html",
    success: function(response) {
      $('#container1').html(response);
      $('#container1').addClass('appear');
    }
  });
});

Ну а как именно проявлять, вариантов куча.

scrollTop: $(".navbar").offset().top

Попробуй обойти через transform: scaleY. То есть, растяни картинки до той же высоты, что и у них, и сожми всю рулетку. Ну или наоборот.

Поиск в яндексе "яндекс карта добавить организацию", вторая ссылка