Olá.

A história do projeto gira em torno de permitirmos que uma pessoa possa adicionar vídeos em nossa página sem precisar mexer diretamente no código. Ao longo das aulas tornamos isso funcional, mas um ponto ainda pode ser melhorado: retirar a necessidade do usuário sempre precisar alterar a url copiada nos vídeos.

APLICANDO A MELHORIA

Uma função responsável pela conversão deve ser criada, a chamarei de converterUrlParaEmbed. Ela ficará dentro do arquivo criarVideo.js.

function converterUrlParaEmbed(url) {
  const embed = url.replace('watch?v=', 'embed/');
  return embed;
}

A função acima recebe a url copiada diretamente do navegador e através do método replace, realiza a alteração necessária para que o vídeo seja reproduzido em nossa página. Agora precisamos utilizar essa função no momento em que adicionarmos um novo vídeo.

Dentro da função criarVideo em criarVideo.js, devemos chamar a função converterUrlParaEmbed no instante em que o dado do input é armazenado na variável url, tal que:

async function criarVideo(event) {
  const url = converterUrlParaEmbed(document.querySelector('[data-url]').value);
}

No código acima, foi alterado apenas a linha da variável url, todo o restante se manteve o mesmo.

Pronto, com isso o usuário não precisa mais se preocupar em editar o link toda vez que um novo vídeo for adicionado ;)