Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

 

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

  • Conteúdo Similar

    • Por ILR master
      Fala pessoal, tudo bem?
       
      Tô tentando fazer um pre-loading, mas não consigo de jeito algum.
      Quero mostrar uma animação enquanto a página é carregada e depois de caregada, esconder a animação e mostrar conteúdo.
       
      Aguém pode me ajudar?
       
      Segue código abaixo
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
          <title>PÁGINA LOAD</title>

      <style type="text/css">
      .loadclass {
          border: 2px solid #f3f3f3; /* Light grey */
          border-top: 4px solid #ffc401; /* Blue */
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 2s linear infinite;
      }
      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }
      .conteudo {
          display:none;
      }
      </style>
      <script>
          function loading(){
              document.getElementsByClassName('loadclass')[0].style.display="none";
              document.getElementsByClassName('conteudo').style.display="block";
          }
      </script>
      </head>
      <body onLoad="loading()">
      <div class="loadclass"></div>
      <div class="conteudo">SEU CONTEUDO AQUI DENTRO!!!</div>
      </body>
      </html>
    • Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
×

Informação importante

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