Добавление пользовательских всплывающих окон чата в трансляцию YouTube скачать в хорошем качестве

Добавление пользовательских всплывающих окон чата в трансляцию YouTube

Хотя я сам не могу вести трансляции, хотел поделиться быстрым решением для тех, кто хочет использовать всплывающие окна чата на стримах YouTube. 00:00 Вступление 01:21 Подключение чата к OBS 03:31 Добавление пользовательского кода 06:31 Настройка всплывающих окон СКОПИРУЙТЕ НИЖЕПРИВЕДЕННЫЙ КОД В OBS: ------------------------------------------------------------------------------ /* =============================== 1) СДЕЛАЙТЕ ВСЮ ПАНЕЛЬ ЧАТА ПРОЗРАЧНОЙ ============================== */ yt-live-chat-app, yt-live-chat-renderer, #contents, #items, iron-list { background: transparent !important; background-color: transparent !important; } /* Предотвращение обрезки родительского элемента */ yt-live-chat-renderer, #items, iron-list { overflow: visible !important; } /* =============================== 2) СТРОКА СООБЩЕНИЙ ЧАТА (ПРОЗРАЧНАЯ) =============================== */ yt-live-chat-text-message-renderer { margin: 6px 0 !important; background: transparent !important; background-color: transparent !important; } /* =============================== 3) ПУЗЫРЬКИ ЧАТА (Сплошная рамка и градиентный фон) =============================== */ yt-live-chat-text-message-renderer #content { /* Градиент фона (слева направо) */ background-image: linear-gradient( to right, #17e9fc, #9fff96 ) !important; /* Сплошная рамка для единообразия */ border: 4px solid #0033ff !important; border-radius: 16px !important; padding: 8px 12px !important; max-width: 85% !important; box-sizing: border-box !important; opacity: 1 !important; overflow: visible !important; } /* =============================== 4) ТЕКСТ СООБЩЕНИЯ =============================== */ yt-live-chat-text-message-renderer #message { color: #000000 !important; opacity: 1 !important; white-space: normal !important; } /* =============================== 5) УДАЛЕНИЕ ЭФФЕКТОВ YOUTUBE ПО УМОЛЧАНИЮ =============================== */ yt-live-chat-text-message-renderer, yt-live-chat-text-message-renderer * { box-shadow: none !important; filter: none !important; } /* Отключение наложений при наведении курсора */ yt-live-chat-text-message-renderer::before, yt-live-chat-text-message-renderer::after, yt-live-chat-text-message-renderer:hover { background: transparent !important; } /* =============================== 6) АНИМАЦИЯ ЗАТУХАНИЯ =============================== */ yt-live-chat-text-message-renderer { opacity: 1; transform: translateY(0); animation: fadeOut 23s ease forwards; } @keyframes fadeOut { 0% { opacity: 1; transform: translateY(0); } 87% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } }