Бамп, мне это тоже нужно для пары коммерческих проектов. Моя текущая идея, так как мне нужно всего два видеопотока с камер, — взять два Viewport и подключить их к одному портретному дисплею через ANI-HDROTATE-PLUS от A-NeuVideo.

Бамп!

Bump! Это должно случиться.

Обновлено для 4 камер // Удаляем предыдущий инжектор
[...document.querySelectorAll('#uniStackFix')].forEach(n => n.remove());

const GAP = 8; // вертикальный отступ между тайлами

const css = `
@media (orientation: portrait){

 /* 0) Никогда не скрывать области просмотра автоматически */
 [class*="liveview"], [class*="LiveView"] * { visibility:visible !important; }

 /* 1) Располагаем контейнер областей просмотра вертикально и растягиваем на весь экран */
 .LiveViewGrid__List,
 [class^="liveview__Viewports"],
 [class*="ViewportsWrapper"]{
   display:flex !important;
   flex-direction:column !important;
   gap:${GAP}px !important;
   height:100vh !important;
   max-height:100vh !important;
   overflow:hidden !important;
   align-items:stretch !important;
   justify-content:flex-start !important;
 }

 /* 2) Четыре известных слота (data-viewport="0..3") должны быть видимыми блоками */
 [data-viewport="0"],
 [data-viewport="1"],
 [data-viewport="2"],
 [data-viewport="3"]{
   display:block !important;
   position:static !important;
   margin:0 !important;
   padding:0 !important;
   min-height:0 !important;
   flex:0 0 auto !important; /* высоту зададим ниже */
   overflow:hidden !important;
 }

 /* 3) Задаём каждому из четырёх слотов одинаковую высоту (¼ экрана минус отступы) */
 [data-viewport="0"],
 [data-viewport="1"],
 [data-viewport="2"],
 [data-viewport="3"]{
   height:calc((100vh - ${GAP}px * 3) / 4) !important;
 }

 /* 4) Приводим к нормальному виду внутренние обёртки «плеера», которые UniFi помечает как grid/abs/ratio */
 .LiveViewGridSlot__Viewport,
 .LiveViewGridSlot__ViewportContent,
 .ViewportLiveStreamPlayer__Root,
 .ViewportLiveStreamPlayer__Wrapper,
 .ConnectedLivePlayer__Root,
 .Zoomable__ZoomFrame,
 .LiveMediaStreamsPlayer__StyledVideoHolder{
   position:relative !important;
   display:block !important;
   width:100% !important;
   height:100% !important;
   max-height:none !important;
   margin:0 !important;
   inset:auto !important;
   transform:none !important;
 }

 /* Убиваем трюки с padding для «ratio box» */
 .LiveViewGridSlot__Viewport [style*="padding-top"],
 .LiveViewGridSlot__Viewport [style*="padding-bottom"]{
   padding-top:0 !important;
   padding-bottom:0 !important;
 }

 /* 5) Заставляем медиаконтент заполнять свой слот */
 .LiveViewGridSlot__Viewport video,
 .LiveViewGridSlot__Viewport canvas,
 .LiveViewGridSlot__Viewport img{
   position:absolute !important;
   inset:0 !important;
   width:100% !important;
   height:100% !important;
   object-fit:cover !important; /* замени на 'contain', если нужен letterbox */
   display:block !important;
 }
}
`;

const s = document.createElement('style');
s.id = 'uniStackFix';
s.textContent = css;
document.documentElement.appendChild(s);

/* JS-принудитель: повторно применяем высоты, когда UniFi вставляет плееры в другие слоты */
function enforce() {
 const slots = [...document.querySelectorAll('[data-viewport="0"],[data-viewport="1"],[data-viewport="2"],[data-viewport="3"]')];
 const H = (window.innerHeight - GAP * 3) / 4;
 slots.forEach(el => {
   el.style.setProperty('height', `${H}px`, 'important');
   el.style.setProperty('display', 'block', 'important');
 });

 // Если UniFi воткнул transform на .Zoomable__ZoomFrame, обнуляем его.
 document.querySelectorAll('.Zoomable__ZoomFrame').forEach(z => {
   z.style.setProperty('transform', 'none', 'important');
 });

 // Принудительно заполняем медиа, даже если инлайн-стиль говорит object-fit: contain
 document.querySelectorAll('.LiveViewGridSlot__Viewport video, .LiveViewGridSlot__Viewport canvas, .LiveViewGridSlot__Viewport img')
   .forEach(m => m.style.setProperty('object-fit', 'cover', 'important'));
}

new MutationObserver(enforce).observe(document.body, {subtree:true, childList:true, attributes:true});
window.addEventListener('resize', enforce);
enforce();

Это обязательная вещь

Я тоже это хочу!

Эта функция была бы очень полезна для вертикальных/портретных мониторов. На RaPi это делается очень легко. Непонятно, почему Viewport не может это поддерживать.

Кто-нибудь нашёл адекватную альтернативу для бесконтактного решения в режиме «всегда включено»? Казалось бы, такая простая фича!

Снова подниму тему. Было бы отличным дополнением. Пожалуйста, добавьте поддерживаемое представление.