Capturar id para url do iframe

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

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;

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
 });
 }
 );
}

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++;
 });

 }
 );
}

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

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