Добавляем чат в трансляцию Youtube программы OBS

  Впринципе этот вариант чатика Вы видете, только в самой трансляции (и он остается в записи сервера), но не в игре, попозже рассмотрим, как играть и просматривать чатик не имея второго монитора, наверно как у многих начинающих стримеров. Итак начнем...
     Первым делом запускаем нашу програмку OBS, сворачиваем её.

Открываем свой канал Youtube в браузере, переходим по ссылке менеджер видео (при написании этой стать она находилась вверху, над шапкой канала)

     Далее переходим в раздел прямые трансляции (на данный момент ссылка расположена слева)

     Справа в окне видим сам чатик, кликаем не по шестеренке настроек а по точкам, и выбираем строчку открыть чат в новом окне.
В новом окне открывшегося чата копируем адресную строку (как угодно и удобней, хоть комбинацией клавиш, у меня скрин просто как пример, главно понять смысл)

     Окошко пока не закрываем оно нам пригодится в будущем, можно просто свернуть, чтоб не мешало. Разворачиваем програмку OBS. В окне источники кликаем плюсик (добавляем источник, либо своим способом если проще)

Выбираем верхнюю строчку BrwserSource
В новом появившемся окошке вводим название какое хотим (я так и обозвал чат Ютуба, чтоб не путать с другими источниками, их будет скорее всего много)

Кстати нижняя строчка с выделенной галочкой (Сделать источник видимым) должна быть отмечена по умолчанию, если нет то добавляем и жмем OK.
     В появившемся окошке выделяем верхнюю строчку (так как по умолчанию там стоит не нужный нам URL) вставляем скопированный нами адрес нашего чата (если он пропал из буфера, как у меня, то копирум заного урл чатика и вставляем) Примерно так то должно выглядеть, пока ничего другого не трогаем жмем OK.

     Вот такое примерно должно получится в самом OBS(не обращаем внимания на бегущую строку, я ее забыл убрать, а щас долго перескринить):

 Теперь кликаем по строчке чат Ютуба в источниках, в открывшемся окне переходим на строчку CSS (выделяем стираем стандарт). Теперь для простоты я кину уже готовый код:

@import url("https://fonts.googleapis.com/css?family=Ubuntu Condensed");

@import url("https://fonts.googleapis.com/css?family=Ubuntu");

@import url("https://fonts.googleapis.com/css?family=Imprima");

/* Background colors*/

body {

  background-color: rgba(0,0,0,0);

}

yt-live-chat-text-message-renderer {

  background-color: rgba(0,0,0,0.7) !important;

}

yt-live-chat-text-message-renderer[author-type="owner"] {

  background-color: rgba(100,0,0,0.7) !important;

}

yt-live-chat-text-message-renderer[author-type="moderator"] {

  background-color: rgba(0,0,100,0.7) !important;

}

/* Transparent background. */

yt-live-chat-renderer {

  background-color: transparent !important;

}

/* Outlines */

yt-live-chat-renderer * {

  text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;

  font-family: "Ubuntu";

  font-size: 20px !important;

  line-height: 20px !important;

}

yt-live-chat-text-message-renderer #content,

yt-live-chat-legacy-paid-message-renderer #content {

  overflow: initial; !important

}

/* Hide scrollbar. */

yt-live-chat-item-list-renderer #items{

  overflow: hidden !important;

}

yt-live-chat-item-list-renderer #item-scroller{

  overflow: hidden !important;

}

/* Hide header and input. */

yt-live-chat-header-renderer,

yt-live-chat-message-input-renderer {

  display: none !important;

}

/* Reduce side padding. */

yt-live-chat-text-message-renderer,

yt-live-chat-legacy-paid-message-renderer {

    padding-left: 4px !important;

  padding-right: 4px !important;

  margin: 4px 0 !important;

}

yt-live-chat-paid-message-renderer #header {

    padding-left: 4px !important;

  padding-right: 4px !important;

}

/* Avatars. */

yt-live-chat-text-message-renderer #author-photo,

yt-live-chat-paid-message-renderer #author-photo,

yt-live-chat-legacy-paid-message-renderer #author-photo {

  

  width: 32px !important;

  height: 32px !important;

  border-radius: 32px !important;

  margin-right: 8px !important;

}

/* Hide badges. */

yt-live-chat-text-message-renderer #author-badges {

  

  vertical-align: text-top !important;

}

/* Timestamps. */

yt-live-chat-text-message-renderer #timestamp {

  

  color: #999999 !important;

  font-family: "Imprima";

  font-size: 16px !important;

  line-height: 16px !important;

}

/* Badges. */

yt-live-chat-text-message-renderer #author-name[type="owner"],

yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {

  color: #ffd600 !important;

}

yt-live-chat-text-message-renderer #author-name[type="moderator"],

yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {

  color: #5e84f1 !important;

}

yt-live-chat-text-message-renderer #author-name[type="member"],

yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {

  color: #0f9d58 !important;

}

/* Channel names. */

yt-live-chat-text-message-renderer #author-name {

  color: #cccccc !important;

  font-family: "Ubuntu Condensed";

  font-size: 20px !important;

  line-height: 20px !important;

}

yt-live-chat-text-message-renderer #author-name::after {

  content: ":";

  margin-left: 2px;

}

/* Messages. */

yt-live-chat-text-message-renderer #message,

yt-live-chat-text-message-renderer #message * {

  color: #ffffff !important;

  font-family: "Ubuntu";

  font-size: 20px !important;

  line-height: 20px !important;

}

/* SuperChat/Fan Funding Messages. */

yt-live-chat-paid-message-renderer #author-name,

yt-live-chat-paid-message-renderer #author-name *,

yt-live-chat-legacy-paid-message-renderer #event-text,

yt-live-chat-legacy-paid-message-renderer #event-text * {

  color: #ffffff !important;

  font-family: "Ubuntu";

  font-size: 20px !important;

  line-height: 20px !important;

}

yt-live-chat-paid-message-renderer #purchase-amount,

yt-live-chat-paid-message-renderer #purchase-amount *,

yt-live-chat-legacy-paid-message-renderer #detail-text,

yt-live-chat-legacy-paid-message-renderer #detail-text * {

  color: #ffffff !important;

  font-family: "Ubuntu";

  font-size: 20px !important;

  line-height: 20px !important;

}

yt-live-chat-paid-message-renderer #content,

yt-live-chat-paid-message-renderer #content * {

  color: #ffffff !important;

  font-family: "Ubuntu";

  font-size: 20px !important;

  line-height: 20px !important;

}

yt-live-chat-paid-message-renderer {

  margin: 4px 0 !important;

}

yt-live-chat-legacy-paid-message-renderer {

  background-color: #0f9d58 !important;

  margin: 4px 0 !important;

}

yt-live-chat-text-message-renderer a,

yt-live-chat-legacy-paid-message-renderer a {

  text-decoration: none !important;

}

yt-live-chat-text-message-renderer[is-deleted],

yt-live-chat-legacy-paid-message-renderer[is-deleted] {

  display: none !important;

}

yt-live-chat-ticker-renderer {

  background-color: transparent !important;

  box-shadow: none !important;

}

yt-live-chat-ticker-renderer {

  display: none !important;

}

yt-live-chat-ticker-paid-message-item-renderer,

yt-live-chat-ticker-paid-message-item-renderer *,

yt-live-chat-ticker-sponsor-item-renderer,

yt-live-chat-ticker-sponsor-item-renderer * {

  color: #ffffff !important;

  font-family: "Ubuntu";

}

@keyframes anim {

0% { opacity: 0; }

100% { opacity: 1; transform: none;}

}

yt-live-chat-text-message-renderer,

yt-live-chat-legacy-paid-message-renderer {

  animation: anim 200ms;

  animation-fill-mode: both;

}

yt-live-chat-text-message-renderer,

yt-live-chat-legacy-paid-message-renderer {

  animation: anim 30400ms;

  animation-fill-mode: both;

}

@keyframes anim {

0% { opacity: 0; }

0.6578947368421052% { opacity: 1; transform: none;}

99.3421052631579% { opacity: 1; transform: none;}

100% { opacity: 0; }

}

yt-live-chat-text-message-renderer,

yt-live-chat-legacy-paid-message-renderer {

  animation: anim 30400ms;

  animation-fill-mode: both;

}

копируем полностью и вставляем в CSS
Вот так это примерно выглядит (пока изменений не видим)

жмем ОК...
   Вглавном окне программы видим пару сек мигающий наш чат и окно вроде пропадает, не пугаемся проверяем располагаем окошко чатика, чтобы оно не совпадало с программой для проверки...

Если надо увеличиваем картинку, чтоб рассмотреть что получилось на примере (кстати он действует с задержкой сек 5-10 точно, а может больше или меньше, в зависимости от работоспособности вашей системы и провайдера) Настраиваем нужную величину и перемещаем куда надо чтоб не закрывать основной фон игры...
Теперь рассмотрим как расположить игру и чат, имея в нналичии только один монитор, у меня он крупненьки, поэтому приглядываться не приходится.
     Заходим в игру и в настройках переводим её в оконный режим и чуть сжимаем под  полноэкранное отображение в обс и подгоняем под окошко чата, его кстати тоже сжимаем как надо вот так это примерно выглядит на рабочем столе

     А вот так в OBS (тоесть, как полный экран)

    Удачи при тансляции, кстати не забываем поглядывать саму трансляцию в браузере, мало ли какие еще косяки всплывут.....