[TUTORIAL] Auto embed em vídeos do youtube

2 participantes

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

Membro Entusiasta

[TUTORIAL] Auto embed em vídeos do youtube Empty [TUTORIAL] Auto embed em vídeos do youtube

Mensagem por Ace 09.11.13 13:30


[TUTORIAL] Auto embed em vídeos do youtube Magic

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
[TUTORIAL] Auto embed em vídeos do youtube Painel10

[TUTORIAL] Auto embed em vídeos do youtube 110111Seta Título - Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Auto embed em vídeos do youtube 110210Seta Localização - No investimento, você deverá selecionar "Em todas as páginas".
[TUTORIAL] Auto embed em vídeos do youtube 110310Seta Código JavaScript Código JavaScript
[TUTORIAL] Auto embed em vídeos do youtube 110410Seta 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:
    [TUTORIAL] Auto embed em vídeos do youtube 1nz0b9




© Fórum dos Fóruns


[TUTORIAL] Auto embed em vídeos do youtube Act_bottom 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
Ace

Ace
Membro Entusiasta
Membro Entusiasta

Membro desde : 06/07/2011
Mensagens : 8881
Pontos : 11607

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ajudeiro

[TUTORIAL] Auto embed em vídeos do youtube Empty [TUTORIAL] Converter link YouTube/Dailymotion em vídeo

Mensagem por Fraise 31.10.18 0:29

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
[TUTORIAL] Auto embed em vídeos do youtube Javaac10
[TUTORIAL] Auto embed em vídeos do youtube 110111Seta 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.
[TUTORIAL] Auto embed em vídeos do youtube 110210Seta Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.
[TUTORIAL] Auto embed em vídeos do youtube 110310Seta 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.
[TUTORIAL] Auto embed em vídeos do youtube 110410Seta 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

[TUTORIAL] Auto embed em vídeos do youtube Conscr10
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos