CSS no vMix : Personalize as Transmissões

Olá LiveStreamer, aqui é o Eng. Eduardo Freitas da EasyStream Brasil, o vMix possui uma ferramenta nativa extremamente poderosa chamada Web Browser Input (Entrada de Navegador Web). Ela utiliza o Chromium Embedded Framework (CEF) — o mesmo motor do Google Chrome — para renderizar páginas da web diretamente no seu vídeo.

O vMix permite injetar código CSS (Cascading Style Sheets) diretamente nessa entrada. Isso significa que você pode alterar cores, mudar fontes, remover fundos ou ocultar elementos de qualquer site em tempo real!

📍 1. Onde aplicar o CSS no vMix?

O código CSS é inserido especificamente nas configurações da entrada “Web Browser”. Siga o passo a passo:

Vá em Add Input (Adicionar Entrada) > aba Web Browser 🌐.
Insira a URL desejada (ex: widget do Streamlabs, chat do YouTube, site de notícias).
Defina a resolução (Width/Height) – Recomendamos 1920×1080 para manter a qualidade HD.
No campo CSS, cole seu código personalizado.

📝 Nota Técnica: O recurso de CSS personalizado requer a versão do navegador V115 ou superior, que já vem integrada nas versões mais recentes do vMix.

🛠️ 2. Casos de Uso Mais Comuns

Abaixo, preparei alguns códigos CSS que mais utilizamos nas consultorias da EasyStream Brasil para resolver problemas do dia a dia.

🅰️ Exemplo 1 : Tornar o Fundo Transparente

Muitos widgets vêm com fundo branco ou verde (chroma key). O método profissional é forçar a transparência via CSS para manter sombras e bordas suaves.

Se o site tiver cor de fundo, use este código para removê-la:

CSS

body {
    background-color: transparent !important;
    background-image: none !important;
}
html {
    background-color: transparent !important;
}

🅱️ Exemplo 2 : Ocultar Elementos Indesejados (Rodapés, Logos, Anúncios)

Vai mostrar um site de notícias mas não quer o cabeçalho ou propagandas?

Abra o site no seu navegador (Chrome/Edge).
Clique com o botão direito no elemento chato e escolha Inspecionar 🕵️‍♂️.
Copie o nome da “Class” (ex: .header-banner) ou “ID” (ex: #ad-sidebar).
Cole no vMix:

CSS

/* Exemplo para ocultar um banner */
.header-banner {
    display: none !important;
}

🔠 Exemplo 3 : Personalizar Fontes de Chat

Quer deixar o chat da live com a “cara” da sua marca?

CSS

/* Altera a fonte, cor e tamanho do texto */
body {
    font-family: 'Roboto', sans-serif !important;
    color: #FFFFFF !important; /* Texto Branco */
    font-size: 24px !important;
    font-weight: bold !important; /* Negrito */
}

🚀 3. Fluxo de Trabalho Profissional

Para evitar erros durante o “ao vivo”, siga estas dicas de ouro:

🧪 Teste Externo: Não tente adivinhar o CSS dentro do vMix. Use o F12 (Inspecionar Elemento) do seu navegador para testar as mudanças antes.
❗ Use o !important: Em CSS injetado, adicione !important ao final de cada regra. Isso garante que seu código tenha prioridade sobre o estilo original do site.
🖱️ Input “Mouse Control”: Precisa fazer login ou rolar a página? Ative o controle de mouse nas configurações ou clique com o botão direito na entrada > Mouse Control.

🧠 4. Dica Avançada: Web Controller

O CSS não serve apenas para inputs! Usuários avançados podem modificar a aparência do vMix Web Controller (sua mesa de corte no celular/tablet), criando botões coloridos e interfaces personalizadas. (Fale conosco para projetos avançados de script!)

🧹 5. Mais exemplos de CSSs

Já vimos o básico, mas agora vamos para os recursos avançados. Sabe aquelas barras de rolagem feias, avisos de cookies irritantes ou menus que não param de aparecer? Vamos sumir com eles agora mesmo!

Copie e cole os códigos abaixo na aba Web Browser do seu vMix.

📜 a. O “Exterminador” de Barras de Rolagem

Nada é mais amador como uma barra de rolagem cinza aparecendo no meio do seu overlay. Este código remove as barras vertical e horizontal, mas mantém a página funcional.

CSS

/* Remove a barra de rolagem visualmente */
::-webkit-scrollbar {
    display: none !important;
    width: 0px !important;
    background: transparent !important;
}

Você carrega um site de notícias e a metade da tela é ocupada por “Aceitamos Cookies”. Como esses avisos variam de site para site, este código tenta acertar os termos mais comuns usados pelos desenvolvedores.

CSS

/* Tenta ocultar pop-ups comuns de cookies e modais */
#cookie-banner, .cookie-banner, 
#onetrust-banner-sdk, .cc-banner, 
div[class*="cookie"], div[id*="cookie"] {
    display: none !important;
}

📊 c. Google Slides Limpo (Modo Apresentação)

Muitos clientes enviam links do Google Slides. Ao abrir no navegador do vMix, a barra de controle inferior (aquela preta com os botões de slide) atrapalha. Use isto para deixá-la invisível:

CSS

/* Remove a barra de navegação do Google Slides (modo publicado/apresentação) */
.punch-viewer-navbar, 
.punch-viewer-speaker-notes {
    display: none !important;
}

💬 d. Chat Mais Compacto (YouTube/Twitch)

Se você captura o pop-out do chat para exibir na tela, talvez os avatares (fotos de perfil) ocupem muito espaço e você queira apenas o texto e o nome.

CSS

/* Oculta imagens de perfil (Avatares) para focar no texto */
img, 
yt-live-chat-author-photo, 
.yt-live-chat-author-photo {
    display: none !important;
}

/* Oculta horários das mensagens (Timestamps) */
#timestamp, 
.timestamp {
    display: none !important;
}

🖼️ e. Cortar Topo e Rodapé (Header & Footer)

Para sites institucionais genéricos onde você quer mostrar apenas o conteúdo do meio (o “miolo” da página), o padrão web geralmente usa as tags <header> e <footer>. Vamos removê-las de uma vez.

CSS

/* Remove Cabeçalho e Rodapé padrões do HTML5 */
header, footer, nav {
    display: none !important;
}

🏁 Conclusão

O vMix não é apenas um switcher de vídeo é um navegador web completo. Dominar o campo User CSS elimina a necessidade de capturar telas inteiras e permite criar overlays dinâmicos, leves e profissionais.

Precisa de ajuda para configurar seus inputs ou montar sua estação de transmissão? Conte com a consultoria da equipe da EasyStream Brasil.

💡 Gostou da novidade? Para se manter atualizado com as exigências do mercado e dominar as novas ferramentas do vMix, confira nossos cursos e licenças oficiais aqui na EasyStream Brasil.

Política de Confidencialidade: A EasyStream Brasil reserva-se o direito de preservar a identidade de seus clientes e os detalhes técnicos específicos de seus projetos. Devido à natureza altamente personalizada de nossas soluções, mantemos rigoroso sigilo para garantir a privacidade e a segurança estratégica de cada cliente.

Este material é protegido pela Lei de Direitos Autorais (Lei nº 9.610/98). A reprodução total ou parcial, distribuição, transmissão, exibição ou criação de obras derivadas deste conteúdo sem a autorização expressa e por escrito da EasyStream Brasil é estritamente proibida.