[TUTORIAL] Auto embed em vídeos do youtube

por Ace 09.11.13 13:30

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

1º - 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>"); }); });

2º - 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 110111

Título - Correspondente ao nome da página JavaScript/jQuery que será criada.

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

Localização - No investimento, você deverá selecionar "Em todas as páginas".

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

Código JavaScript Código JavaScript

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

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

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

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

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.

Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.

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.

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

Hitskin.com

[TUTORIAL] Auto embed em vídeos do youtube