Capturar id para url do iframe

[Julio Cavallari 3]

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.

[Edgard Hufelande 27]

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

 

[Julio Cavallari 3]

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']

 

[Edgard Hufelande 27]

É, deixei passar essa questão do camelcase, mas que bom que resolveu! rs