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