Vídeo youtube como fundo do fórum

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

Principal Contribuidor

Tutorial Vídeo youtube como fundo do fórum

Mensagem por Shek 28.02.15 19:12


Vídeo youtube como fundo do fórum Galeri10

Vídeo youtube como fundo do fórum


Com este tutorial, poderá saber como adicionar um vídeo do youtube como fundo do fórum, como se fosse uma imagem normal. Pode ser mais apelativo para fóruns, como por exemplo para fóruns de jogos e animes.


--> Tutoriais, dicas e astúcias <--
Vídeo youtube como fundo do fórum



Vídeo youtube como fundo do fórum WarningCom este código, o fórum pode tornar-se mais lento, pois em conexões mais lentas por parte dos usuários, o youtube torna-se pesado.


- Noção básica da função:
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 administrativo >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>
Vídeo youtube como fundo do fórum Painel13
Vídeo youtube como fundo do fórum 110111 Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Vídeo youtube como fundo do fórum 110210 Seta Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.
Vídeo youtube como fundo do fórum 110310 Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
Vídeo youtube como fundo do fórum 110410 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.


- Código a ser usado:
Primeiro de tudo, veremos qual é o código e onde podemos modificar o código para que possamos escolher qual o vídeo que queremos que seja como fundo.
Código:
(function (e, t) { var n = { ratio: 16 / 9, videoId: "ZCAnLxRvNNc", mute: true, repeat: true, width: e(t).width(), wrapperZIndex: 99, playButtonClass: "tubular-play", pauseButtonClass: "tubular-pause", muteButtonClass: "tubular-mute", volumeUpClass: "tubular-volume-up", volumeDownClass: "tubular-volume-down", increaseVolumeBy: 10, start: 0 }; var r = function (r, i) { var i = e.extend({}, n, i), s = e("body"); $node = e(r); var o = '<div id="tubular-container" style="overflow: hidden; position: fixed; z-index: 1; width: 100%; height: 100%"><div id="tubular-player" style="position: absolute"></div></div><div id="tubular-shield" style="width: 100%; height: 100%; z-index: 2; position: absolute; left: 0; top: 0;"></div>'; e("html,body").css({ width: "100%", height: "100%" }); s.prepend(o); $node.css({ position: "relative", "z-index": i.wrapperZIndex }); t.player; t.onYouTubeIframeAPIReady = function () { player = new YT.Player("tubular-player", { width: i.width, height: Math.ceil(i.width / i.ratio), videoId: i.videoId, events: { onReady: onPlayerReady, onStateChange: onPlayerStateChange } }) }; t.onPlayerReady = function (e) { u(); if (i.mute) e.target.mute(); e.target.seekTo(i.start); e.target.playVideo() }; t.onPlayerStateChange = function (e) { if (e.data === 0 && i.repeat) { player.seekTo(i.start) } }; var u = function () { var n = e(t).width(), r, s = e(t).height(), o, u = e("#tubular-player"); if (n / i.ratio < s) { r = Math.ceil(s * i.ratio); u.width(r).height(s).css({ left: (n - r) / 2, top: 0 }) } else { o = Math.ceil(n / i.ratio); u.width(n).height(o).css({ left: 0, top: (s - o) / 2 }) } }; e(t).on("resize.tubular", function () { u() }); e("body").on("click", "." + i.playButtonClass, function (e) { e.preventDefault(); player.playVideo() }).on("click", "." + i.pauseButtonClass, function (e) { e.preventDefault(); player.pauseVideo() }).on("click", "." + i.muteButtonClass, function (e) { e.preventDefault(); player.isMuted() ? player.unMute() : player.mute() }).on("click", "." + i.volumeDownClass, function (e) { e.preventDefault(); var t = player.getVolume(); if (t < i.increaseVolumeBy) t = i.increaseVolumeBy; player.setVolume(t - i.increaseVolumeBy) }).on("click", "." + i.volumeUpClass, function (e) { e.preventDefault(); if (player.isMuted()) player.unMute(); var t = player.getVolume(); if (t > 100 - i.increaseVolumeBy) t = 100 - i.increaseVolumeBy; player.setVolume(t + i.increaseVolumeBy) }) }; var i = document.createElement("script"); i.src = "//www.youtube.com/iframe_api"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(i, s); e.fn.tubular = function (t) { return this.each(function () { if (!e.data(this, "tubular_instantiated")) { e.data(this, "tubular_instantiated", r(this, t)) } }) } })(jQuery, window)
    $(document).ready(function () {
        $('#fa_welcome').before('<span style="font-size:10px !important;"><a href="#" class="tubular-play">Reproduzir</a> | <a href="#" class="tubular-pause">Pausa</a> | <a href="#" class="tubular-volume-up">Aumentar volume</a> | <a href="#" class="tubular-volume-down">Diminuir volume</a> | <a href="#" class="tubular-mute">Mute</a></span>'); // controlos do vídeo
        $('#wrap, .pun, .bodylinewidth, #ipbwrapper').tubular({ // Seletor para colocar o fundo
            videoId: 'ebXbLfLACGM' // ID do vídeo
        });
    });

No código, procure por:
Código:
// ID do vídeo
Nessa mesma linha, encontrará isto:
Código:
videoId: 'ebXbLfLACGM' // ID do vídeo
A parte "ebXbLfLACGM" é o ID do vídeo do youtube! Como por exemplo: http://prntscr.com/3zlpdx




:copyright: Fórum dos Fóruns & Hancki


Vídeo youtube como fundo do fórum Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Vídeo youtube como fundo do fórum
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18947
Pontos : 22876

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

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