Barre de recherche pour vidéos HTML/CSS

Bonjour,
Pour un devoir en NSI j'aimerais faire une barre de recherche relié directement à des vidéos. J'ai déjà fait la barre de recherche mais elle ne mène à rien, et je voudrais donc que si je tape le titre d'une vidéo (ou des mots clés liés), je puisse tomber sur une liste de vidéos correspondant à ma recherche.

Voilà mon code HTML, grâce à l'aide d'un site :

<form>

<divclass="barrerecherche">

<inputtype="text"class="text"placeholder="Une musique ?"/>

<aclass="bouton"href="#">

<iclass="fa fa-search"aria-hidden="true"></i>

</a>

</form>

Et mon code CSS :

.barrerecherche {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background: #3e20a9;

height: 40px;

border-radius: 40px;

padding: 10px;

  }

.barrerecherche:hover > .text {

width: 240px;

padding: 06px;

  }

.barrerecherche:hover > .bouton {

background: rgb(57, 82, 207);

  }

.bouton {

color: #eeeeee;

float: right;

width: 40px;

height: 40px;

border-radius: 50%;

background: #0b1625;

display: flex;

justify-content: center;

align-items: center;

transition: 0.4s;

color: white;

cursor: pointer;

text-decoration: none;

  }

.bouton > i {

font-size: 20px;

  }

.text {

border: none;

background: none;

outline: none;

float: left;

padding: 0;

color: white;

font-size: 16px;

transition: 0.4s;

line-height: 40px;

width: 0px;

font-weight: bold;

  }

Merci par avance