Ir para conteúdo
Julio Cavallari

Capturar id para url do iframe

Recommended Posts

Preciso de ajuda para capturar o id de um elemento para inserir no src de um iframe

 

<a class="videoLink" id="https://www.youtube.com/embed/tZZ3nEdw-2c">
  <li class="list-unstyled mb-1 liVideo">
    <div class="float-left">
      <img src="https://i.ytimg.com/vi/tZZ3nEdw-2c/default.jpg" alt="Céu e terra se encontram - Davi Fernandes &amp; Cultura do Céu (DVD Céu e terra se encontram)">
    </div>
    <div class="">
      <h6>Céu e terra se encontram - Davi Fernandes &amp; Cultura do Céu (DVD Céu e terra se encontram)</h6>
      <small class="float-right">16:50</small>
    </div>
  </li>
</a>

Função jQuery que tentei utilizar:

$(document).click(".videoLink", function(event){
  event.preventDefault;
  var url = $(this).attr("id");
  console.log(url);
  var iframeVideo = '<iframe width="560" height="315" src="'+url+'" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'
  $("#iframeVideo").html(iframeVideo);
  $("#iframeVideo").show();
})

Porém quando clico no link ele me retorna 'undefined' como o valor da variável url.

Compartilhar este post


Link para o post
Compartilhar em outros sites

A ideia do atributo ID no html é que seja único pra cada elemento, a ideia é que ele seja usado pra identificação de um elemento.

Por tanto você pode usar os atributos data de um elemento, acho mais viável e mais robusto o seu uso, já que ele pode ser dinâmico.

<a class="videoLink" id="video0001" data-yt-link="https://www.youtube.com/embed/tZZ3nEdw-2c">
  <li class="list-unstyled mb-1 liVideo">
    <div class="float-left">
      <img src="https://i.ytimg.com/vi/tZZ3nEdw-2c/default.jpg" alt="Céu e terra se encontram - Davi Fernandes & Cultura do Céu (DVD Céu e terra se encontram)">
    </div>
    <div class="video-content">
      <h6>Céu e terra se encontram - Davi Fernandes & Cultura do Céu (DVD Céu e terra se encontram)</h6>
      <small class="float-right">16:50</small>
    </div>
  </li>
</a>

 

Os atributos data de um elemento, você define na tag de um elemento iniciando por "data-" o restante é o que você deseja referenciar, por exemplo.

 

$(document).click(".videoLink", function(event){
  event.preventDefault;
     
  var data = $(this).data(); // Obtenho todos os atributos datas que defini no elemento, no caso, como só defini yt-link, é o único que vai me retornar.
  
  var iframeVideo = $('<iframe width="560" height="315" src="'+data['yt-link']+'" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
  $('.video-content').append(iframeVideo);
});

Tente dessa forma e nos dê o feedback. rs

 

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tentei com o atributo data e o erro persiste. Ele não captura o a data do elemento. Então quando insiro o src no iframe, ele insere como undefined.

 

<div id="iframeVideo"></div>
<a class="videoLink" id="video1" data-yt-video-id="tZZ3nEdw-2c">
  <li class="list-unstyled mb-1 liVideo">
    <div class="float-left">
      <img src="https://i.ytimg.com/vi/tZZ3nEdw-2c/default.jpg" alt="Céu e terra se encontram - Davi Fernandes & Cultura do Céu (DVD Céu e terra se encontram)">
    </div>
    <div>
      <h6>Céu e terra se encontram - Davi Fernandes & Cultura do Céu (DVD Céu e terra se encontram)</h6>
      <small class="float-right">16:50</small>
    </div>
  </li>
</a>
$(document).on("click", ".videoLink", function(event){
  event.preventDefault;
  var url = $(this).data();		
  var iframeVideo = $('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+url['yt-video-id']+'" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
  console.log(url['yt-video-id']); // me retorna "undefined"
  $("#iframeVideo").html(iframeVideo);
  $("#iframeVideo").show();
});

Edit:

Não sei se influência em algo, mas o código dos links é gerado dinamicamente por uma função:

Spoiler

var videoLinkId = 1;
/*Função para buscar os vídeos*/
function getVideos(musicTitle){
  //Get Results
  $.get(
    "https://www.googleapis.com/youtube/v3/search",{
      part: 'snippet, id',
      q: musicTitle,
      type: 'video',
      maxResults: 10,
      order: 'relevance',
      key: 'AIzaSyDM24CBEVzX0OQfMGD2u0kao_CO5WMyavQ'},
    function(data){
      $.each(data.items, function(i, item){
        var output = getOutput(item);//Insere os vídeos buscados na página			
      });
    }
  );
}
/*Função para gerar os itens*/
function getOutput(item){
  var videoId = item.id.videoId;
  var title = item.snippet.title;
  var thumb = item.snippet.thumbnails.default.url;
  $.get(
    "https://www.googleapis.com/youtube/v3/videos",{
      id: videoId,
      part:'contentDetails',
      key: 'AIzaSyDM24CBEVzX0OQfMGD2u0kao_CO5WMyavQ'},
    function (data) {
      $.each(data.items, function(i, item){
        var output = '<a class="videoLink" id="video'+videoLinkId+'" data-yt-video-id="'+videoId+'"><li class="list-unstyled mb-1 liVideo clearfix">'+
            '<div class="float-left">'+
            '<img src="'+thumb+'" alt="'+title+'">'+
            '</div>'+
            '<div>'+
            '<h6>'+title+'</h6>'+
            '<small class="float-right">'+item.contentDetails.duration+'</small>'+
            '</div>'+
            '</li></a>';
        $("#results").append(output);
        videoLinkId++;
      });

    }
  );
}
getVideos("Davi Fernandes");//Chamada da função

 

Edit2: Resolvi o problema. A função .data() não captura o nome exatamente igual você declara, ele retira os "-" e deixa a primeira letra de cada palavra maiúscula.

 

//Ao invés disso
var url['yt-video-id'];

//Coloquei assim e funcionou
var url['ytVideoId']

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por danilosilva222
      Olá pessoal, boa tarde! 
      Sou novato em programação e aqui no fórum é a minha primeira postagem, e tenho uma dúvida.
      Com Javascript, é possível desenvolver um sistema web completo para gestão, como por exemplo, academias, lojas, supermercados, etc..? 
      Desde já agradeço a atenção de vocês. 
    • Por nosredna
      Olá amigos,
       
      tenho o seguinte código:
      <html> <script type="text/javascript"> function Soma(){ var soma = 0; var ipts = document.querySelectorAll('input[oninput="Soma()"]'); for(var x=0; x<ipts.length; x++){ var valorItem = parseFloat(ipts[x].value); !isNaN(valorItem) ? soma += parseFloat(valorItem) : null; } document.querySelector('#final').value = soma.toFixed(2); } </script> <form action=""> Total produto1: <input type="text" oninput="Soma()" value="0"><br> Total produto2: <input type="text" oninput="Soma()" value="0"><br> <br> Total todos os produtos12: <input type="text" id="final"> </form> </html> Bom...para essas duas inputs funciona corretamente.
      Porém, se eu quiser colocar mais inputs como: Total produto3 + Total produto4 = Total todos os produtos34, Total produtoX + Total produtoY = Total todos os produtosXY, ...
      e usar o mesmo código JS, é possível? alguém poderia me dar uma dica de como eu faço para fazer isso? já tentei de várias maneiras, mas não estou tendo sucesso...
       
      Fico agradecido. 
    • Por jlrs19833
      Bom dia, pessoal! Estou precisando de uma luz para saber como tratar determinado problema:
       
      Cenário: Ambiente em desenvolvimento de plataforma para gestão de uma empresa.
      Linguagem principal: PHP (framework CodeIgniter)
      Dificuldade: retornar dados de select dinâmico junto ao evento de post do formulário.
       
      Descrição: Conforme mencionado acima, estou desenvolvendo um pequeno sistema para uma empresa que conterá poucas telas, sou desenvolver entusiasta, então não tenho muito conhecimento e prática com este assunto. Em determinada tela, o cliente quer que haja um formulário de cadastro onde dentre os diversos campos deste form, haverá dois do tipo select, onde um é o select de cidade e o outro do tipo estado. O select de Estado é preenchido automaticamente quando do carregamento da view, através de uma chamada do controller/model junto ao BD e o select cidade é preenchido de maneira automática, com javascript, através de uma mesma consulta, passando o ID do campo estado. Minha dificuldade está quando faço o submit deste form, pois o campo value do option deste select (cidade) não é enviado junto, pois no código fonte ele não foi carregado. Como posso fazer para recuperar esse value e enviar junto com o evento de submit?
       
      Segue como meus arquivos estão sendo feitos. Como pode observar estou, tentando apenas printar os campos para que eu possa ter certeza que eles estão sendo carregados.
      https://gist.github.com/jlrs19833/808887a5221ff31ca6ea22bf0c8b85a5
       
      Peço desculpas se estou postando no local errado e que os moderadores me orientem neste caso.
       
      Desde já agradeço o auxílio de cada um.
    • Por 4ly
      Olá. Bom basicamente eu tenho um botão âncora que leva até a aba de sobre do meu site, só que ele não tem animação, ele simplesmente "teleporta" para essa aba do nada isso não é legal. 
      Gostaria de saber algum código de JavaScript ou CSS para solucionar isso 
      Esse é o código : 
       
      <button id="explorer"><a href="#about">Explorar</a></button>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.