ちびのはてな

その一歩先へ。ちびです!猫の名前です!ドラゴンボール好き!純粋なサイヤ人のように生きたいと思っています!IT技術で少しでも多くの人が笑顔になってくれたらいいなと。

YouTube のコメントをドラクエ風に表示する

Requirements

Additional CSS

/* Additional CSS. */
yt-live-chat-text-message-renderer #author-name,
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
  font-family: "PixelMplus10";
}
yt-live-chat-item-list-renderer #item-scroller {
    border: 2px solid #fff;
    border-radius: 4px;
}
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 1s;
  animation-fill-mode: both;
}
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

Probrem

  • Multiline text.

It's like this

Caution: This image is applying a mosaic.

f:id:chibi929:20210726230754g:plain
イメージ画像