Staff en línea
Últimos temas
Hola a todos
por YoshiGM Jue Abr 19, 2018 12:27 pm

Foro invision
por Chalo Mar Abr 17, 2018 8:28 am

[Ocio] Contemos hasta el 5000
por Chalo Lun Abr 16, 2018 8:33 am

[ocio] Saludos a todos
por Himnoshistoricos Sáb Abr 14, 2018 5:01 am

[javascript] Colocar un video como fondo del foro
Tema iniciado por y Añadir a favoritos

staff
[codebox]Coloca un video de youtube como fondo del foro.
Para personalizar cambia el id del foro buscando solo el identificador:
videoId: "O5RdMvgk8b0"
eso es todo

demo : http://opensource-code-test.foroactivo.mx/
[/codebox]

[hidecode]
Código:
(function (e, t) { var n = { ratio: 16 / 9, videoId: "O5RdMvgk8b0", 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
        });
    });
[/hidecode]
Chalo
avatar

¿Que estoy pensando? :

de regreso [table class=fecha_up][td]Se modifico:10/04/18 - 9:50 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6629


Puntos :

8685


Me gusta :

999


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario http://www.opensourcephpbb3.com

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.