Executando verificação de segurança...
Em resposta a [AJUDA] Barra de pesquisas
2
sammarxz

Bom, projeto interessante. Parabéns.

Pelo que entendi tu quer buscar em uma lista de vídeos do youtube, certo?
Suponho que esses vídeos estão em iframe, talvez por isso tu esteja com dificuldades pra fazer funcionar.

Mas para contornar isso, você pode colocar o título do vídeo em HTML puro e fazer a busca baseado nisso. por exemplo:

html:

<input type="text" id="searchBox" placeholder="Pesquisar por nome...">

<div id="videos">
  <div class="video">
    <h2>Video 1</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID_1" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="video">
    <h2>Video 2</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID_2" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="video">
    <h2>Video 3</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID_3" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

javascript:

const input = document.querySelector("#searchBox");
const videos = document.querySelectorAll(".video");

function searchVideos(filter) {
  [].forEach.call(videos, function(video) {
    const title = video.getElementsByTagName("h2")[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)
})

dessa forma estamos pegando o valor do input e comparando apenas com o título do vídeo que está em Html.

veja online no codepen:
https://codepen.io/sammarques/pen/VwGgBvM

espero ter ajudado!
ah! e compartilha aí o código no github

Carregando publicação patrocinada...
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);
});

0
2
sammarxz
Autor
Autor

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
Autor
Autor

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