كيفية إضافة شات YouTube وTwitch إلى OBS Studio وتخصيصه بـ CSS

من أكثر ما يعجبني في البث المباشر إمكانية التفاعل اللحظي مع المشاهدين. على عكس الفيديوهات العادية، يطرح المتابع سؤالا أو يكتب تعليقا ويحصل على رد في اللحظة نفسها، وهذا ما يجعل البث المباشر تجربة مختلفة تماما.

لهذا أصبح الشات جزءا مهما من أي بث، على يوتيوب أو تويتش أو غيرهما. إلى جانب دوره في التواصل مع الجمهور، يجعل المشاهد يشعر أنه جزء من البث لا مجرد متفرج.

أهمية الشات لا تقتصر على البث المباشر نفسه، بل تمتد إلى المقاطع القصيرة (Clips) المأخوذة منه. وجود الشات داخل المقطع يساعد من يشاهده خارج منصة البث على فهم سياق الحديث وردود فعل الجمهور، خاصة في اللحظات المضحكة أو المواقف التفاعلية.

إضافة الشات إلى البث تمنحه لمسة أكثر احترافية، وهذا المقال يشرح الطريقة التي أستعملها لإظهاره داخل OBS Studio خطوة بخطوة.

إضافة شات يوتيوب إلى OBS Studio

اخترت البدء بشات يوتيوب لأنه المنصة التي أستعملها أكثر، وخصصت شكله بـ CSS ليتناسب مع تصميم البث. شرح تويتش موجود في قسم منفصل لاحقا.

بعد تجربة طرق مختلفة، استقريت على هذه الطريقة لأنها لا تحتاج إلى أدوات خارجية، وتمنح حرية كاملة في تعديل شكل الشات والألوان والخطوط، وحتى حركة ظهور الرسائل الجديدة.

الخطوات:

1. افتح لوحة التحكم الخاصة بالبث المباشر على يوتيوب، وانتقل إلى نافذة الشات على الجهة اليمنى.
2. اضغط أيقونة النقاط الثلاث أعلى الشات، واختر Popout Chat. تفتح نافذة جديدة تحتوي الشات فقط.
3. انسخ رابط هذه الصفحة.
   
   
   
   
   
   
4. في OBS Studio، ادخل إلى الـ Scene الذي تريد إظهار الشات فيه.
5. اضغط زر الإضافة، اختر Browser Source، وسمّه (مثلا Chat).
6. الصق الرابط الذي نسخته، واضغط موافق.

سيظهر الشات داخل OBS، لكنه في هذه المرحلة يبدو كصفحة ويب عادية. الخطوات التالية لتنسيقه.

ضبط حجم الشات ومكانه

أول شيء أقوم به: إزالة الأجزاء غير الضرورية من نافذة الشات. اضغط مفتاح Alt أثناء سحب الحواف؛ عادة أقصّ الجزء العلوي والسفلي حتى لا تظهر عناصر لا أحتاجها أثناء البث. بعدها أعيد تحجيم الشات وأضعه في المكان المناسب داخل المشهد.

يمكنك التوقف هنا إذا أردت شاتا بسيطا، لكنني أفضل تخصيص شكله بـ CSS لنتيجة أكثر احترافية.

تخصيص الشات باستخدام CSS

Browser Source في OBS يسمح بإضافة CSS مخصص، وهذا من أكثر ما يعجبني فيه. إذا لم تستخدم CSS من قبل، الأمر أبسط مما يبدو. افتح إعدادات Browser Source، وستجد بين الخيارات (الطول، العرض) خيار Custom CSS — هذا هو المكان الذي نضع فيه الكود.

إخفاء العناصر غير الضرورية

هذا الجزء يجعل خلفية الصفحة شفافة، ويخفي رأس الشات وخانة كتابة الرسائل وتنبيهات يوتيوب، ليبدو الشات أنظف داخل البث.

/* CSS */نسخ



body, 
#container.yt-live-chat-renderer, 
yt-live-chat-renderer { 
    background-color: transparent !important; 
}
yt-live-chat-header-renderer, 
yt-live-chat-message-input-renderer, 
#card.yt-live-chat-viewer-engagement-message-renderer { 
    display: none !important; 
}

تعديل شكل الرسائل

هذا الجزء يتحكم في شكل الرسائل نفسها:

أستعمل شخصيا اللون الأبيض للنص لوضوحه على معظم الخلفيات، وعرض 400 بكسل يناسب معظم البثوث. لإزالة خلفية الرسائل، احذف سطر  الـ background.

/* CSS */نسخ



yt-live-chat-text-message-renderer { 
    background: rgba(36, 36, 36, 0.8) !important; 
    border-radius: 10px !important; 
    padding: 10px !important; 
    margin: 8px 0 !important; 
    max-width: 400px !important; 
    word-wrap: break-word !important; 
    font-size: 18px !important; 
    font-weight: bold !important; 
    color: #ffffff !important; 
    animation: slideIn 0.5s ease-out forwards; 
}

تعديل أسماء المستخدمين

يتحكم هذا الجزء بلون الاسم وحجم الخط وسماكته والمسافات. أفضل لونا مختلفا عن لون الرسالة لتمييز الاسم عن المحتوى بسهولة أثناء القراءة؛ أستخدم البنفسجي، لون الهوية البصرية التي أعتمدها.

/* CSS */نسخ



#author-name.yt-live-chat-author-chip { 
    color: #c2a4ff !important; 
    font-weight: bold !important; 
    font-size: 20px !important; 
    display: block !important; 
    margin-bottom: 4px !important; 
}

تمييز صاحب البث

جزء صغير يميز الرسائل التي أكتبها بنفسي (صاحب القناة)، ليسهل على المتابعين تمييز ردودي وسط عشرات الرسائل الأخرى.

/* CSS */نسخ



yt-live-chat-text-message-renderer[is-owner] { 
    border: 2px solid #ffd700 !important; 
}

الكود الكامل ليوتيوب

الكود الكامل الذي أستعمله، جاهز للنسخ مباشرة دون تجميع الأجزاء يدويا:

/* CSS */نسخ



body, 
#container.yt-live-chat-renderer, 
yt-live-chat-renderer { 
    background-color: transparent !important; 
}

yt-live-chat-header-renderer, 
yt-live-chat-message-input-renderer, 
#card.yt-live-chat-viewer-engagement-message-renderer { 
    display: none !important; 
}

yt-live-chat-text-message-renderer { 
    background: rgba(36, 36, 36, 0.8) !important; 
    border-radius: 10px !important; 
    padding: 10px !important; 
    margin: 8px 0 !important; 
    max-width: 400px !important; 
    word-wrap: break-word !important; 
    font-size: 18px !important; 
    font-weight: bold !important; 
    color: #ffffff !important; 
    animation: slideIn 0.5s ease-out forwards; 
}

#author-name.yt-live-chat-author-chip { 
    color: #c2a4ff !important; 
    font-weight: bold !important; 
    font-size: 20px !important; 
    display: block !important; 
    margin-bottom: 4px !important; 
}

yt-live-chat-text-message-renderer[is-owner] { 
    border: 2px solid #ffd700 !important; 
}

@keyframes slideIn { 
    0% { transform: translateX(-30px); opacity: 0; } 
    100% { transform: translateX(0); opacity: 1; } 
}

إضافة شات تويتش إلى OBS Studio

كود تويتش قريب من كود يوتيوب، مع تعديلات إضافية بسبب اختلاف تصميم المنصة. بعد إضافة الشات إلى OBS عبر Browser Source (بنفس خطوات يوتيوب أعلاه)، انتقل مباشرة إلى خانة Custom CSS.

إزالة الخلفيات الافتراضية

يجعل هذا الجزء كل خلفيات الشات شفافة بالكامل، للتخلص من أي عنصر قد يتعارض مع تصميم مشهدك في OBS.

/* CSS */نسخ



body, 
html,
#root,
.chat-root,
.chat-room,
.chat-scrollable-area__message-container {
    background: transparent !important;
    background-color: transparent !important;
}
.chat-scrollable-area {
    background: transparent !important;
}

تنسيق الرسائل

يضيف هذا الجزء خلفية شبه شفافة، زوايا دائرية، مسافات داخلية وخارجية، وعرضا أقصى للرسالة، مع نفس حركة الظهور المستخدمة في كود يوتيوب.

/* CSS */نسخ



.chat-line__message {
    background: rgba(36, 36, 36, 0.7) !important; 
    border-radius: 8px !important;
    margin: 8px 4px !important;
    padding: 10px !important;
    max-width: 400px !important; 
    width: fit-content !important;
    
    animation: slideIn 0.5s ease-out forwards;
}

تنسيق أسماء المستخدمين ونص الرسائل

يتحكم هذا الجزء بلون اسم المستخدم وحجم الخط وسماكته، وبلون ووضوح نص الرسالة. اخترت اللون الذهبي للاسم لأنه يبرز فوق الخلفية الداكنة.

/* CSS */نسخ



/* تنسيق اسم المستخدم */
.chat-author__display-name {
    color: #FFD700 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    margin-right: 5px !important;
}

/* تنسيق نص الرسالة */
.text-fragment {
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

تكبير رسائل الإيموجي

أحيانا يرسل المشاهدون رسائل تحتوي إيموجيات فقط. يكبّر هذا الجزء هذه الرسائل لتصبح أوضح وأسهل للمشاهدة داخل البث.

/* CSS */نسخ



.chat-line__message--emote-only .text-fragment {
    font-size: 24px !important;
}

الكود الكامل لتويتش

/* CSS */نسخ



body, 
html,
#root,
.chat-root,
.chat-room,
.chat-scrollable-area__message-container {
    background: transparent !important;
    background-color: transparent !important;
}

.chat-scrollable-area {
    background: transparent !important;
}

.chat-line__message {
    background: rgba(36, 36, 36, 0.7) !important;
    border-radius: 8px !important;
    margin: 8px 4px !important;
    padding: 10px !important;
    max-width: 400px !important;
    width: fit-content !important;
    
    animation: slideIn 0.5s ease-out forwards;
}

.chat-line__message:hover {
    background: rgba(36, 36, 36, 0.7) !important;
}

@keyframes slideIn { 
    0% { transform: translateX(-30px); opacity: 0; } 
    100% { transform: translateX(0); opacity: 1; } 
}

.chat-author__display-name {
    color: #FFD700 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    margin-right: 5px !important;
}

.text-fragment {
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

.chat-line__message--emote-only .text-fragment {
    font-size: 24px !important;
}

أسئلة شائعة

الشات لا يظهر شفافا رغم إضافة CSS الخاص بالخلفية؟

تأكد من نسخ الكود كاملا داخل خانة Custom CSS دون حذف أي !important، لأن يوتيوب وتويتش يفرضان خلفيات افتراضية تحتاج هذه الأولوية لتجاوزها.

هل يمكن استخدام ألوان الهوية البصرية الخاصة بي بدل الألوان في الكود؟

نعم، غيّر قيم color وbackground إلى الألوان التي تريدها بصيغة Hex (مثل #ff0000) أو RGBA للشفافية.

هل نفس الكود يعمل على منصات أخرى غير يوتيوب وتويتش؟

لا مباشرة. كل منصة تستخدم أسماء عناصر (Class/ID) مختلفة في صفحتها، فكود يوتيوب لن يعمل على تويتش أو العكس دون تعديل أسماء العناصر المستهدفة.

رابط Popout Chat توقف عن العمل بعد فترة، ما السبب؟

هذا غالبا مرتبط بانتهاء جلسة تسجيل الدخول في المتصفح المستخدم داخل Browser Source. أعد فتح رابط Popout Chat من لوحة تحكم البث ولصقه من جديد في OBS.

هل تنسيق الشات يبطئ أداء OBS؟

تأثيره ضئيل جدا في العادة، لأن Browser Source يعرض صفحة ويب خفيفة نسبيا. إذا لاحظت بطئا، تأكد أن حجم نافذة المصدر في OBS غير أكبر من اللازم.