SHOWROOM(ショールーム)で映像の上にアバターやギフト効果etc被らせないメモ

---

20171127更新:「フォローしました」の表示を被せないよう修正

---

ユーザースタイルシートで、動画のレイヤー(重なり順)を変えれば、他の要素が上に被さるのを防ぐことができる。

■Stylish(Chrome版)用ユーザースタイルシート(一例)

/* 映像のレイヤー設定 */
#js-room-video { z-index: 1000000; }
/* テロップを上にずらす */
#telop { top: 62px; }
/* 観客を下にずらす */
#js-avatar { bottom: -20px; }

適用先(ドメイン): www.showroom-live.com

ショールームの新バージョンで有効。
映像のレイヤーを手前にすると、テロップやふきだしコメントが隠れて見えなくなるので、それぞれ上下にずらしてみた。
環境によってちょうどいいpx値が異なるかも。
テロップはpx値を大きくするほど上に、観客はpx値のマイナスを大きくするほど下に移動。
要素の重なり順を決めるz-index値をとにかく高くしているので、周りのボックスやダイアログなどなんでも動画に重なるとその後ろに隠れる(場合によっては不都合があるかも)。

■要素のz-index値(既定)抜粋
テロップ : 1
観客アバター(&ギフト効果) : 5
ギフトエリア(星やギフトを贈るためのボックス) : 10
アラートダイアログ : 300
ボーナスゲット！の表示 : 1000


■Import用 Mozilla Formatコード

@-moz-document domain("www.showroom-live.com") {
    /* 映像のレイヤー設定 */
    #js-room-video { z-index: 1000000; }
    /* テロップを上にずらす */
    #telop { top: 62px; }
    /* 観客を下にずらす */
    #js-avatar { bottom: -20px; }
}

Importから貼り付け(Chrome版Stylishの場合)。


■その他スタイルシートの設定例

/* テロップだけは被せたい(映像のz-indexより大きい数値にする) */
#telop { z-index: 1000001; }

/* アバターを消す(観客非表示) */
#js-avatar { display: none; }