granty

Сначала RTFM:
Sensor APIs Concepts and Usage
Orientation Sensor
Generic Sensor API
Gyroscope

А потом залезть мобильником и посмотреть как youtube реализовал VR 360 видео - поперемещайте телефон вправо-влево и насладитесь сферическим видео (мне это понравилось).
Но имейте ввиду, что не все мобильники имеют встроенный гироскоп (мой Samsung Galaxy J7(2016) его не имеет, а A30 - имеет).

vimeo и youtube знают волшебное слово "Feature Policy".

1. Если посмотрите API vimeo - увидите там параметр autoplay. Потом сравните вызов API c параметром autoplay и без такового. И увидите, что добавляется ?autoplay=1 в <iframe src=>, чтобы их скрипт показа видео автоматически запустил его воспроизведение (кликнул по кнопке Start).
Но, как вы заметили, браузеры могут блокировать автоматическое воспроизведение медиаконтента. Поэтому см п 2 ниже:

2. Обратите внимание на атрибут allow="autoplay; fullscreen" у ифрейма, присылаемого в API п. 1. Это и есть "Feature Policy" (Политика возможностей), установленная через атрибут тега (её ещё можно издавать через HTTP-заголовок).
autoplay; означает autoplay *; - то есть, браузеры, поддерживающие Feature Policy, разрешат автовопроизведение видео с любых (*) чужих доменов.
Укажете там autoplay https://player.vimeo.com; - автовоспроизведение будет разрешено только для плеера vimeo.

Менять CSS сайта по времени суток не имеет никакой практической пользы, эта устаревшая мулька использовалась 12 лет назад.
Сейчас можно делать смену CSS по датчику внешнего освещения смартфона (Ambient light sensor), чтобы при низкой освещённости давать более светлый дизайн (или, наоборот, более тёмный, чтобы не слепил глаза).

Но если так хочется менять CSS по времени суток - этот запрос в Яндексе полностью даст ответ на ваш вопрос.

При 'Content-Type': 'application/json' массивы-обертки $_POST /$_GET на сервере не заполняются, так не присылается Имя_Параметра, а присылается только Значение_Параметра.
Сервер не может обработать такие данные автоматически ($_POST - ассоциативный массив, а имя_переменной не прислано).

Получить такие данные можно только через php://input

Откуда был загружен iframe никак не узнать (узнать-то можно, но в вашем случае это не поможет).

1. яваскрипт не сработает, тк политика «Одинакового источника» (Same Origin Policy) запрещает доступ из ифрейма к window.top.location.href, если они имеют разные происхождения (грубо говоря - разные домены).
Проверить window.top != window.self браузер даёт, а доступ к фактическому url из window.top - нет.

2. на сервере проверять переменную $_SERVER['HTTP_REFERER'] (кто запросил загрузку страницы) смысла тоже нет - если у ифрейма установлен атрибут referrerpolicy:
<iframe referrerpolicy='no-referrer'>
реферер не будет прислан (будет, но только в IE/Edge и Safari_IOS).


Но сделать то, что вы хотите - можно легко. На странице надо издать HTTP-заголовок CSP с директивой frame-ancestors:

header( "Content-Security-Policy: frame-ancestors https://ваш_сайт.ru http://ваш_сайт.ru https://www.facebook.com https://facebook.com https://www.google.com https://google.com;" );

это разрешит открывать эту страницу в ифрейме с собственного домена ваш_сайт.ru(без поддоменов!) по http:/https:.
И сайтам facebook.com и google.com с www или без (но только если фэйсбук/гугль загружены по https: - а их и невозможно загрузить по http:).

PS: если ваш сайт доступен и по www - добавьте в "волшебную" строку:
https://www.ваш_сайт.ru http://www.ваш_сайт.ru

Вы написали только страницу показа "селектов" из БД.

1. Ваши < select id="station"> и < select id="flats"> надо вставить внутрь < form action=''> ..., сделать в ней кнопку submit и отправлять значения выбранных селектов на сервер, а он уже по ним должен выбрать статьи из БД и возвращать страницу с результатами.

Надо добавить name='' к вашим селектам, по этим именам вы будете выбирать присланные в них значения из массивов $_POST/$_GET:
< select id="station" name="station"> и < select id="flats" name="flats">

2. Второй вариант - делать запрос к серверу на ajax (передавая значения выбранных селектов) и вставлять ответ от сервера на страницу.

Поройтесь в интернете, там примеров навалом.

PS: Потом вы столкнётесь с тем, что сначала посетитель должен выбрать < select id="station" name="station">, и в зависимости от выбранной станции ему должен динамически подгрузиться список < select id="flats" name="flats"> которые расположены рядом с этой станцией (а не все имеющиеся квартиры). Иначе теряется смысл выбора станции.
Короче, продумывайте архитектуру, читайте про ajax/XMLHttpRequest (проще всего будет писать яваскрипты с помощью библиотеки jquery).
Ида, примеров реализации этого в интернете навалом.

При клике по балуну(метке) это сделать легко. Заходите на эту демонстрашку с Яндекса или эту демку, прямо там исправляете код яваскрипта и нажимаете кнопку "Обнобить". И смотрите как оно работает и прямо там отлаживаете код.

Как сделать центрирование/масштабирование карты по клику на балун - есть пример кода на Яндекс-блоге.

Если вам нужно перехватывать клики именно по карте - вешаете слушатель события клик по карте:

myMap.geoObjects.events.add('click', function (e) {
  var targetObject = e.get('target');
  // . . .
  }

, определяете координаты клика и ближайший к ним балун. Центрируете и масштабируете карту как вам надо. Примеров навалом на самом Яндексе (от самих разработчиков Я-карт), можно собрать то, что вам нужно даже не разбираясь глубоко в теме.