0

Estou criando uma função para pegar o link do youtube escrito em um input e pegar a imagem desse video.

Para pegar a imagem é só usar o link abaixo, alterando o id do video (valor de v=) pelo link do youtube:

Link do video
https://www.youtube.com/watch?v=99s-xZhZNns

Imagem:
<img src="https://img.youtube.com/vi/99s-xZhZNns/mqdefault.jpg">

Para isso criei a função abaixo, mas queria criar uma regra para que ele criasse a imagem apenas se no texto do input tiver o termo "youtube.com/watch?v=" para evitar que ele crie uma imagem com referência errada, se não tiver o termo, deveria aparecer uma mensagem (Link não encontrado)

<input type="text" id="youtube">
<span id="thumb"></span>

<script>
$( "#youtube" ).keyup(function() {
    //verificar se #youtube contem o termo ".youtube.com/watch?v="
    //SE TIVER pegar o valor de v= e montar a imagem
    $("#thumb").html('<img src="https://img.youtube.com/vi/valor_do_v=/mqdefault.jpg">');
});
</script>

1 Resposta 1

2

Você pode usar uma condição para isso, usando o método indexOf.

Algo assim:

$('#youtube').on('change', function() {
  var value = $(this).val()

  if (value.indexOf('.youtube.com/watch?v=') === -1) {
    alert('Não tem.')

    // Usamos o "return" para parar a execução da função de callback.
    return
  }

  alert('Tudo certo! Faça o que você precisa fazer aqui.')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="youtube" />
<span id="thumb"></span>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .