Advertisement
ennio21

videos do youtube mais bonito e que leva a postagem completa

Jan 19th, 2014
117
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2. /////////// CRÉDITO //////////
  3. Desenvolvido por Ennio Sousa (http://uid.me/ennio)
  4. Adaptado para uCoz System
  5. Veja demonstração em http://jsfiddle.net/nL82N/
  6. /////////// FUNÇÃO ///////////
  7. Deixa o iframe de vídeos do youtube mais bonita, baseado no módulo vídeos.
  8. Torna um linque que leva para a postagem completa + comentários para contar a visualização e metas de analytics.
  9. Por enquanto funciona apenas com vídeos do youtube.
  10. ////////// COMO USAR /////////
  11. Adicionar este JavaScript na descrição breve da postagem
  12. Adicionar id="entryMessage$ID$" ao antes da variável $MESSAGE$
  13. Ex.: <div id="entryMessage$ID$">$MESSAGE$</div>
  14.  
  15. Usar o CSS abaixo:
  16. <style>a.vep-playvideo{display:inline-block;border:none;position:relative;text-decoration:none;outline:none}a.vep-playvideo span{cursor:pointer}.vep-video-block img{border:0;border-radius:20px;vertical-align:middle}.vep-playbutton{display:block;position:absolute;width:68px;height:68px;left:50%;top:50%;margin:-34px 0 0 -34px;background:url(/.s/img/vi/video-play.png)}a.vep-playvideo:hover .vep-playbutton{background-position:0 -68px}.vep-length{position:absolute;bottom:15px;right:15px;padding:2px 5px;background:rgba(0, 0, 0, 0.63);font:700 12px/16px 'Arial';color:#fff;border-radius:3px}.vep-title{position:absolute;top:10px;left:10px;padding:2px 5px;background:rgba(0, 0, 0, 0.63);font:700 12px/16px 'Arial';color:#fff;border-radius:3px}</style>
  17. */
  18.  
  19.  
  20. var string$ID$ = $('iframe', $('#entryMessage$ID$')).attr( "src" ); //pega o conteúdo do elemento src do iframe
  21. tamanho = string$ID$.length; //calcula a quantidade de caracteres
  22. var vid = string$ID$.substr(tamanho-11); //elimina todos os caracteres e deixa apenas os 11 ultimos (apenas youtube)
  23.  
  24. $('iframe', $('#entryMessage$ID$')).after('<div class=\"video_'+ vid +' vep-video-block\"></div>'); //cria uma div logo após o iframe (onde está o conteúdo do video)
  25.  $("<a/>").attr({href: "$ENTRY_URL$", id: "ViGoToEntry$ID$", class: "vep-playvideo"}).appendTo(".video_"+vid);
  26.  
  27. /* chama dodos do video em json e cria os elementos */
  28. $.getJSON("http://gdata.youtube.com/feeds/api/videos/" + vid + "?v=2&alt=jsonc&callback=?", function(json){ //coleta as informações do video
  29.  
  30.  $("<img/>").attr({src: json.data.thumbnail.hqDefault}).appendTo("#ViGoToEntry$ID$");
  31.  $('<span class="vep-title">'+json.data.title+'</span>').appendTo("#ViGoToEntry$ID$"); //cria um spam com o título do video
  32.  $("<span/>").attr({class: "vep-playbutton"}).appendTo("#ViGoToEntry$ID$"); //cria o span do botão play
  33.  
  34. /* converte segundos em minutos e horas para a duração do video ficar H:M:S*/
  35.  var raw = json.data.duration;
  36.  var time = parseInt(raw,10);
  37.  var hours = Math.floor(time / 3600);
  38.  var minutes = Math.floor(time / 60);
  39.     if (minutes < 10) {
  40.      var minutes = '0'+minutes;
  41.     }else {
  42.         var minutes = minutes;
  43.     }
  44.  var seconds = time % 60;
  45.     if (seconds < 10) {
  46.       var seconds = '0'+seconds;
  47.     }else {
  48.        var seconds = seconds;
  49.     }
  50.  $('<span class="vep-length">'+hours+':'+minutes+':'+seconds+'</span>').appendTo("#ViGoToEntry$ID$"); //cria um span com a duração do video
  51.  });
  52.  
  53. $('iframe', $('#entryMessage$ID$')).remove(); //remove o iframe do DOM do navegador
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement