CanalQb - Obs Studio Carregando Playlist do Youtube

---

@CanalQb que Youtube 

---

---

CanalQb - Obs Studio Carregando Playlist do Youtube

---

---

Coloque sua playlist do Youtube, nesta pagina do blog, igual ao exemplo abaixo:

Exemplo de link do Youtube:

https://www.youtube.com/watch?v=P6YUdpxhpg8&list=PL_bWKnK7ufEAzouYibMW-Uvo6BDR0HzOP

Agora você irá montar o link neste formato:

Exemplo de link que você precisa colocar Blog:

https://canalqb.blogspot.com/2024/07/canalqb-css-para-obs-youtube.html?list=PL_bWKnK7ufEAzouYibMW-Uvo6BDR0HzOP&index=1

Uma vez criado o link adicionando sua playlist, chegou a hora as configurações do do Obs Studio.

Abra o OBS Studio e crie um navegador:

Escolha o nome que quiser para o navegador:

Agora ele vai abrir a tela abaixo, cole o link que você modificou aqui

Em vermelho o link, em azul a dimensão inicial que você deseja.

Role a tela um pouco para baixo, e inclua o CSS que está no final deste post

Conclua a atividade e esta tela irá aparecer

Pronto agora você está pronto para anunciar produtos, filmes Youtube, Desenhos, Clips de musica.

Obs configure seu OBS Studio para a capacidade do seu computador e FPS adequado para sua internet.

Delay de 10 segundos na minha internet.

Crie sua conta no Kwai, via Android ou Iphone: https://kwai-video.com/w/j5PX7UlG

Acesse: https://studio.kwai.com/

Procure o botão

Então preencha as informações abaixo

Após finalizar, Clique em "Ver detalhes"

Então chegou a hora de você procurar o seu token para usar com o OBS Studio

Clique sobre "Informação de transmissão enviada" e aqui está disponivel os 2 valores que você irá usar.

Volte para o OBS Studio e vá em configurações, procure "Tramissão", e no servidor coloque personalizado.

Agora é só iniciar a tramissão:

Volte para o Kwai Studio e verifique a transmissão acontecendo.

---

CSS

Modifique como preferir, mas tenha em mente que o .player está configurado corretamente para todos os OBS e outros streams

body { margin: 0; padding: 1; display: flex; flex-direction: column; align-items: center;            justify-content: center; height: 100vh;  background-color: #000; color: #fff; }

.player-container { position: relative; width: 80%; padding-top: 45%; /* Aspect ratio 16:9 */            margin-bottom: 20px; }

.player { position: absolute; top: 0;  left: 0; width: 100%; height: 100%;  border: none; }

.title, .author { margin: 5px 0;  font-size: 1.2em; }

.title { color: #fff; }

.author { color: #fff; }

#header-wrap, #sora-panel, #mobile-header, #logo-content, #header-logo, #header-ads, #social-menu, #mobile-logo, #home-ad, #main-menu, #sidebar1, #social-widget, #sidebar2, #footer-sec1, #footer-sec2, #footer-sec3,#menu-footer {    display: none !important; }