Executando verificação de segurança...
Respondendo a "Bom, projeto interessante. Parabéns. Pelo que e..." dentro da publicação [AJUDA] Barra de pesquisas
1
ThauanMelo

Muuuito Obrigado! ajudou demais!

Link do repositório: https://github.com/ThauanMelo/Tech-Clips
Link do site: https://thauanmelolpmodel.netlify.app

Só estou com algumas dúvidas, vi que o código funcionou perfeitamente no Codepen, No caso dos vídeos do meu site, se você puder dar uma olhadinha, alterei no JS as classes para as que eu defini no HTML, mas não funcionou :(

const input = document.querySelector(".search-input");
const videos = document.querySelectorAll(".card-content");

function searchVideos(filter) {
[].forEach.call(videos, function (video) {
const title = video.getElementsByTagName("p")[0].textContent.toLowerCase();
const iframe = video.getElementsByTagName("iframe")[0];
const videoId = iframe.src.split("/").pop();

// obtém o ID do vídeo do link do iframe

if (title.indexOf(filter) > -1) {
  video.style.display = "";
  iframe.src = "https://www.youtube.com/embed/" + videoId + "?autoplay=1"; // adiciona o parâmetro autoplay
} else {
  video.style.display = "none";
  iframe.src = "https://www.youtube.com/embed/" + videoId;
  // remove o parâmetro autoplay
}

});
}

input.addEventListener("keyup", (event) => {
const searchValue = event.target.value.toLowerCase();

searchVideos(searchValue);
});

Carregando publicação patrocinada...
0
2
sammarxz

desculpa man, não dá pra te ajudar sem saber o que tá acontecendo...

Tenta editar essa tua resposta pra colocar uma parte do HTML também, ou coloca lá no Codepen.

1
0
2
sammarxz

Tranquilo.

Cara, foi um errinho bobo no HTML na linha 137, saca só:

erro

tem uma " perdida lá.

resolvendo isso o código funciona.

Outra coisa que alterei foi a constante:

const videos = document.querySelectorAll(".card-item");

assim pegamos o elemento em si para podermos dar o display: none, se não ainda fica o box lá.

Codepen: https://codepen.io/sammarques/pen/zYJeJJm

1