Ir para o Blog
Quero me inscrever no Youtube
Quero me inscrever no Youtube
Ir para o Blog

Como Criar um Player de Vídeo com Playlist (Estilo YouTube) no WordPress com HTML, CSS e JavaScript

Se você nunca mexeu com código antes, pode ficar tranquilo: usar esse player de vídeos é muito mais simples do que parece à primeira vista. A ideia aqui não é que você vire programador, mas sim que entenda o básico necessário para colocar isso no ar e conseguir fazer pequenas alterações quando precisar.

Vamos começar pelo mais importante: onde esse código vai ficar. Se você usa WordPress com Elementor, o caminho é direto. Basta adicionar um widget de “HTML” na página e colar todo o código ali dentro. Não precisa separar nada, nem mexer em configurações avançadas. É literalmente copiar e colar. Depois disso, o player já vai aparecer funcionando.

Quando você olhar o código, pode parecer grande, mas ele é dividido em três partes bem simples. A primeira parte é o visual, que define cores, espaçamentos e o formato do player. A segunda é a estrutura, que organiza o vídeo principal e a lista de vídeos. E a terceira é um pequeno script que faz a troca de vídeos acontecer quando alguém clica na playlist.

Agora vem a parte mais prática: como trocar ou adicionar vídeos. Todo vídeo do YouTube tem um link, e dentro desse link existe um código único, chamado de “ID do vídeo”. Por exemplo, em um link como “youtube.com/watch?v=ABC123”, essa parte “ABC123” é o que você precisa. É isso que o player usa para carregar o vídeo.

Dentro do código, você vai ver vários blocos parecidos, cada um representando um vídeo da playlist. Sempre que quiser adicionar um novo, você só precisa copiar um desses blocos e trocar duas coisas: o ID do vídeo e o título. O ID vai aparecer em dois lugares — um no link do vídeo e outro na imagem da miniatura — então é importante substituir nos dois. Já o título é o texto que aparece para o usuário, então você pode escrever do jeito que quiser.

Uma coisa interessante é que você não precisa se preocupar com o título que aparece em “Assistindo agora”. Ele já é atualizado automaticamente quando alguém clica em um vídeo. Isso acontece porque o código pega o texto direto do item clicado. Ou seja, você só escreve o título uma vez, e o sistema faz o resto sozinho.

Se quiser mudar o visual, também é bem simples. As cores principais estão definidas no código, então se você quiser trocar o laranja por outra cor da sua marca, basta substituir o valor “#FD7422”. O mesmo vale para o fundo preto ou para o arredondamento das bordas. Não precisa entender profundamente de design ou programação, é mais uma questão de ajustar valores.

Depois que tudo estiver configurado, o comportamento é exatamente o que você espera: o usuário entra na página, vê o primeiro vídeo carregado automaticamente e pode navegar pelos outros clicando na lista lateral. Não há recarregamento de página, não há travamento, e tudo acontece de forma fluida.

No fim, o mais importante é entender que você não precisa dominar o código para usar esse tipo de solução. Basta saber onde colar, o que copiar e o que substituir. Com isso, você já consegue montar uma estrutura de vídeos que parece profissional, melhora a experiência do usuário e valoriza muito mais o seu conteúdo.

E conforme você for usando, vai perceber que pequenas mudanças ficam cada vez mais fáceis. É assim que você evolui: não tentando aprender tudo de uma vez, mas entendendo o suficiente para fazer acontecer.


<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Player Profissional</title>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background: #000;
  color: #fff;
}

.container {
  display: flex;
  height: 70vh;
}

/* PLAYER */
.player {
  flex: 3;
  padding: 20px;
}

.player iframe {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  border: 3px solid #FD7422;
}

/* PLAYLIST */
.playlist {
  flex: 1;
  background: #0d0d0d;
  padding: 15px;
  overflow-y: auto;
  border-left: 2px solid #FD7422;
}

/* HEADER */
.now-playing {
  margin-bottom: 15px;
  padding: 10px;
  border-bottom: 1px solid #222;
}

.now-playing small {
  color: #aaa;
}

.now-playing h3 {
  font-size: 14px;
  margin-top: 5px;
}

/* ITEM */
.video-item {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  padding: 8px;
  border-radius: 15px;
  cursor: pointer;
  transition: 0.3s;
}

.video-item:hover {
  background: #1a1a1a;
}

.video-item.active {
  background: #FD7422;
  color: #000;
}

/* THUMB */
.thumb {
  width: 120px;
  height: 70px;
  border-radius: 10px;
  object-fit: cover;
}

/* TITLE */
.video-title {
  font-size: 13px;
  font-weight: bold;
  line-height: 1.3;
}

/* 🔥 RESPONSIVO (AGORA NO LUGAR CERTO) */
@media (max-width: 768px) {

  .container {
    flex-direction: column;
    height: auto;
  }

  .player {
    padding: 10px;
  }

  .player iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .playlist {
    border-left: none;
    border-top: 2px solid #FD7422;
    padding: 10px;
  }

  .thumb {
    width: 100px;
    height: 60px;
  }

  .video-title {
    font-size: 12px;
  }

}
</style>
</head>

<body>

<div class="container">

  <!-- PLAYER -->
  <div class="player">
    <iframe id="videoPlayer"
      src="https://www.youtube.com/embed/SYb4H-YEBjE"
      frameborder="0"
      allowfullscreen>
    </iframe>
  </div>

  <!-- PLAYLIST -->
  <div class="playlist">

    <div class="now-playing">
      <small>Assistindo agora...</small>
      <h3 id="tituloAtual"></h3>
    </div>

    <div class="video-item active" onclick="trocarVideo('SYb4H-YEBjE', this)">
      <img class="thumb" src="https://img.youtube.com/vi/SYb4H-YEBjE/hqdefault.jpg">
      <div class="video-title">titulo 1</div>
    </div>

    <div class="video-item" onclick="trocarVideo('6e7MVhBCDUE', this)">
      <img class="thumb" src="https://img.youtube.com/vi/6e7MVhBCDUE/hqdefault.jpg">
      <div class="video-title">titulo 2</div>
    </div>

    <div class="video-item" onclick="trocarVideo('DIYIR-tob4E', this)">
      <img class="thumb" src="https://img.youtube.com/vi/DIYIR-tob4E/hqdefault.jpg">
      <div class="video-title">titulo 3</div>
    </div>

    <div class="video-item" onclick="trocarVideo('h9Yip4nrSJU', this)">
      <img class="thumb" src="https://img.youtube.com/vi/h9Yip4nrSJU/hqdefault.jpg">
      <div class="video-title">titulo 4</div>
    </div>

    <div class="video-item" onclick="trocarVideo('4kBuVtVzsik', this)">
      <img class="thumb" src="https://img.youtube.com/vi/4kBuVtVzsik/hqdefault.jpg">
      <div class="video-title">titulo 5</div>
    </div>

    <div class="video-item" onclick="trocarVideo('maxahfB7qFE', this)">
      <img class="thumb" src="https://img.youtube.com/vi/maxahfB7qFE/hqdefault.jpg">
      <div class="video-title">titulo 6</div>
    </div>

    <div class="video-item" onclick="trocarVideo('yO0rbCOBbrQ', this)">
      <img class="thumb" src="https://img.youtube.com/vi/yO0rbCOBbrQ/hqdefault.jpg">
      <div class="video-title">titulo 7</div>
    </div>

  </div>

</div>

<script>
function trocarVideo(videoId, elemento) {
  document.getElementById("videoPlayer").src =
    "https://www.youtube.com/embed/" + videoId;

  const titulo = elemento.querySelector(".video-title").innerText;
  document.getElementById("tituloAtual").innerText = titulo;

  document.querySelectorAll(".video-item").forEach(item => {
    item.classList.remove("active");
  });

  elemento.classList.add("active");
}

// define título inicial ao carregar
window.onload = function() {
  const primeiro = document.querySelector(".video-item.active");
  const titulo = primeiro.querySelector(".video-title").innerText;
  document.getElementById("tituloAtual").innerText = titulo;
}
</script>

</body>
</html>

Só criar um elemento HTML dentro do elementor e colar esse código ;)

Continue aprendendo...

Sumário