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
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); });