[TUTORIAL] Auto embed em vídeos do youtube

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Auto embed em vídeos do youtube

Mensagem por Ace em 09/11/13, 11:30 am



Vídeos

Um efeito muito útil, pois dá forma de vídeo aos links de vídeos do youtube postados nas mensagens do fórum.

--> Tutoriais, dicas e astúcias <--
Auto embed em vídeos do youtube



- Explorando o código:
Código:
jQuery(function(){
          var ancho = "560";
          var alto = "315";
          jQuery('.postbody a[href*="youtube.com/watch"]').each(function(){
              var ytid = jQuery(this).attr('href').split("v=")[1].split("&")[0];                               
              jQuery(this).html("<iframe width="+ancho+" height="+alto+" src=http://www.youtube.com/embed/"+ytid+" frameborder=0 allowfullscreen></iframe><br>"); 
          });
          jQuery('.postbody a[href*="youtu.be/"]').each(function(){
              var ytid = jQuery(this).attr('href').split("youtu.be/")[1].split("?")[0];                               
              jQuery(this).html("<iframe width="+ancho+" height="+alto+" src=http://www.youtube.com/embed/"+ytid+" frameborder=0 allowfullscreen></iframe><br>"); 
          });   
        });
- Inserindo código .JS:
Primeiro devemos adicionar o codigo .JS que irá fazer tal efeito em nosso forum, então deveremos aceder a:
Painel de Controle -> Módulos -> HTML & JAVASCRIPT -> Gestão dos Códigos JavaScript -> Criar um novo Java Script

Seta Título - Correspondente ao nome da página JavaScript/jQuery que será criada.
Seta Localização - No investimento, você deverá selecionar "Em todas as páginas".
Seta Código JavaScript Código JavaScript
Seta Habilitar o gerenciamento dos códigos JavaScript - Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

  • Resultado:




© Fórum dos Fóruns


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Auto embed em vídeos do youtube
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8881
Pontos Ativos : 11607

Ver perfil do usuário https://ajuda.forumeiros.com

[TUTORIAL] Converter link YouTube/Dailymotion em vídeo

Mensagem por Fraise em 30/10/18, 10:29 pm

Converter link YouTube/Dailymotion em vídeo

Com este tutorial, ao ser adicionado o link de um vídeo do YouTube ou do Dailymotion, ele automaticamente será convertido para o formato vídeo.

Converter link YouTube/Dailymotion em vídeo


TUTORIAIS, DICAS E ASTÚCIAS

Instalação do código Javascript

As páginas javascript ativas em seu fórum possibilita inserir scripts e jQuery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de Controle Seta Branca Módulos Seta Branca HTML e Javascript Seta Branca Gestão dos códigos Javascript Seta Branca Criar um novo javascript
Seta Habilitar o gerenciamento dos códigos Javascript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum.
Seta Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.
Seta Investimento - Define o local em específico que este script será executado. Você pode investir o script para vários locais no fórum (Todas as páginas) ou pode definir para certos locais disponíveis na tela de investimento. Neste caso, estaremos investindo somente nos tópicos.
Seta Código Javascript - Espaço destinado a receber o script que será ativado pelo administrador. Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento.

Código:
Código:
$(function(){
 
/******* VARIAVEIS *******/
  var largeur = "560"; /* LARGURA DO VIDEO */
  var hauteur = "315"; /* ALTURA " " */
/***************************************/
 
  $('.postbody a[href*="youtube.com/watch"]').each(function(){
    var ytid = $(this).attr('href').split("v=")[1].split("&")[0];                           
    $(this).html("<iframe width="+largeur+" height="+hauteur+" src=https://www.youtube.com/embed/"+ytid+" frameborder=0 allowfullscreen></iframe><br />");
    });
 
  $('.postbody a[href*="youtu.be/"]').each(function(){
    var ytid = $(this).attr('href').split("youtu.be/")[1].split("?")[0];                           
    $(this).html("<iframe width="+largeur+" height="+hauteur+" src=https://www.youtube.com/embed/"+ytid+" frameborder=0 allowfullscreen></iframe><br />");
    });
 
  $('.post-content a[href*="youtube.com/watch"]').each(function(){
    var ytid = $(this).attr('href').split("v=")[1].split("&")[0];                           
    $(this).html("<iframe width="+largeur+" height="+hauteur+" src=https://www.youtube.com/embed/"+ytid+" frameborder=0 allowfullscreen></iframe><br />");
    });
  $('.post-content a[href*="dailymotion.com"]').each(function(){
    var ytid = $(this).attr('href').split('/video/')[1];               
    $(this).html("<iframe width="+largeur+" height="+hauteur+" src=https://www.dailymotion.com/embed/video/"+ytid+" allowfullscreen allow=autoplay></iframe><br />");
    });
 
  $('.post-content a[href*="youtu.be/"]').each(function(){
    var ytid = $(this).attr('href').split("youtu.be/")[1].split("?")[0];                           
    $(this).html("<iframe width="+largeur+" height="+hauteur+" src=https://www.youtube.com/embed/"+ytid+" frameborder=0 allowfullscreen></iframe><br />");
    });
 
  $('.postbody a[href*="dailymotion.com"]').each(function(){
    var ytid = $(this).attr('href').split('/video/')[1];               
    $(this).html("<iframe width="+largeur+" height="+hauteur+" src=https://www.dailymotion.com/embed/video/"+ytid+" allowfullscreen allow=autoplay></iframe><br />");
    });
});
Após a instalação, o código já estará a resultar.

Resultado do tutorial

avatar

Fraise
Admineiro
Admineiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 6099
Pontos Ativos : 7621

Ver perfil do usuário https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum