Jump to content
  • Sky
  • Blueberry
  • Slate
  • Blackcurrant
  • Watermelon
  • Strawberry
  • Orange
  • Banana
  • Apple
  • Emerald
  • Chocolate
  • Charcoal

Recommended Posts

Hola gente! :D aca les dejo para quien le pueda interesar una pequeña modificación para poner un Video como background según Categoría  ;) ,en este caso lo he hecho para la categoria llamada  18 en mi web ._. 

 

Dentro de: m.post_content.tpl y antes de  {include file='modules/m.posts_tags.tpl'} va el siguiente Código...

 

{if $tsPost.categoria.c_seo == '18'}
{literal}
<script type="text/javascript">
var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#polina button");

if (window.matchMedia('(prefers-reduced-motion)').matches) {
    vid.removeAttribute("autoplay");
    vid.pause();
    pauseButton.innerHTML = "Paused";
}

function vidFade() {
  vid.classList.add("stopfade");
}

vid.addEventListener('ended', function()
{
// only functional if "loop" is removed 
vid.pause();
// to capture IE10
vidFade();
}); 


pauseButton.addEventListener("click", function() {
  vid.classList.toggle("stopfade");
  if (vid.paused) {
    vid.play();
    pauseButton.innerHTML = "Pause";
  } else {
    vid.pause();
    pauseButton.innerHTML = "Paused";
  }
})
</script>
{/literal}


{literal}
<style type="text/css">
body {
  margin: 0;
  background: #000; 
}
video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}
.stopfade { 
   opacity: .5;

@media screen and (max-width: 500px) { 
  div{width:70%;} 
}
@media screen and (max-device-width: 800px) {
  html { background: url(https://thenewcode.com/assets/images/polina.jpg) #000 no-repeat center center fixed; }
  #bgvid { display: none; }
}
</style>
{/literal}


<html>
<head>
<body>
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
  <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button  -->
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
</head>
</body>
</html>
{/if}

 

 

Ejemplo: Contenido para Adultos

Y eso es todo amigos,como ya se habrán podido dar cuenta no soy nada experto en estas cosas .-.    pero bueno , intento contribuír con lo que puedo.

Estoy seguro que se puede mejorar mucho  y ojalá a muchos les haya servido,eso es todo.... Saludos!

 

 

Edited by KillerJohn
  • Like 5

Share this post


Link to post
Share on other sites

Inutil, ocupar mas recursos y come mb de los que visitan desde su telefono sin plan

Share this post


Link to post
Share on other sites

Hola,gracias +1

Nota:Veo que lo has hecho en la v5,no todos los themes tiene el {include file='modules/m.posts_tags.tpl'}, dentro de m.post_content.tpl , este include si lo tienen {include file='modules/m.posts_metadata.tpl'} pueden poner el código junto a eso.
Puedes crear un archivo con ese código, subirlo a la carpeta modules y llamarlo con la sentencia include,ejemplo:


m.posts_video.tpl

{if $tsPost.categoria.c_seo == '18'}
{literal}
<script type="text/javascript">
var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#polina button");

if (window.matchMedia('(prefers-reduced-motion)').matches) {
    vid.removeAttribute("autoplay");
    vid.pause();
    pauseButton.innerHTML = "Paused";
}

function vidFade() {
  vid.classList.add("stopfade");
}

vid.addEventListener('ended', function()
{
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});


pauseButton.addEventListener("click", function() {
  vid.classList.toggle("stopfade");
  if (vid.paused) {
    vid.play();
    pauseButton.innerHTML = "Pause";
  } else {
    vid.pause();
    pauseButton.innerHTML = "Paused";
  }
})
</script>
{/literal}


{literal}
<style type="text/css">
video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}
.stopfade {
   opacity: .5;

@media screen and (max-width: 500px) {
  div{width:70%;}
}
@media screen and (max-device-width: 800px) {
  html { background: url(https://thenewcode.com/assets/images/polina.jpg) #000 no-repeat center center fixed; }
  #bgvid { display: none; }
}
</style>
{/literal}


<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
  <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button  -->
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
{/if}

 

{include file='modules/m.posts_video.tpl'}

 

 

 

  • Like 1

Share this post


Link to post
Share on other sites
hace 9 horas, RodrigoVGarcia dijo:

Parece genial y como no creo que a mi web le entre mucha gente del celu. O entraran pero usando el wifi de su casa. Me gusta. :)

Gracias ;) 

hace 6 horas, Tronlar dijo:

Hola,gracias +1

Nota:Veo que lo has hecho en la v5,no todos los themes tiene el {include file='modules/m.posts_tags.tpl'}, dentro de m.post_content.tpl , este include si lo tienen {include file='modules/m.posts_metadata.tpl'} pueden poner el código junto a eso.
Puedes crear un archivo con ese código, subirlo a la carpeta modules y llamarlo con la sentencia include,ejemplo:


m.posts_video.tpl

{if $tsPost.categoria.c_seo == '18'}
{literal}
<script type="text/javascript">
var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#polina button");

if (window.matchMedia('(prefers-reduced-motion)').matches) {
    vid.removeAttribute("autoplay");
    vid.pause();
    pauseButton.innerHTML = "Paused";
}

function vidFade() {
  vid.classList.add("stopfade");
}

vid.addEventListener('ended', function()
{
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});


pauseButton.addEventListener("click", function() {
  vid.classList.toggle("stopfade");
  if (vid.paused) {
    vid.play();
    pauseButton.innerHTML = "Pause";
  } else {
    vid.pause();
    pauseButton.innerHTML = "Paused";
  }
})
</script>
{/literal}


{literal}
<style type="text/css">
video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}
.stopfade {
   opacity: .5;

@media screen and (max-width: 500px) {
  div{width:70%;}
}
@media screen and (max-device-width: 800px) {
  html { background: url(https://thenewcode.com/assets/images/polina.jpg) #000 no-repeat center center fixed; }
  #bgvid { display: none; }
}
</style>
{/literal}


<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
  <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button  -->
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
{/if}

 

{include file='modules/m.posts_video.tpl'}

 

 

 

Muchas gracias por la sugerencia! ;)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By rodolfo23
      Hola amigos alguien podría ayudarme a adaptar este mod para que solo puedan utilizarlo usuarios de determinados rangos? el mod es el siguiente:
      Lo que quería es que en la creación de un rango esté la opción de si los usuarios de ese rango pueden publicar un vídeo en su perfil, el mod que siga siendo el mismo solo que tenga esa opción  alguien podría? espero sus respuestas!!
       
    • By Dany
      Hola master tengo este pequeño detalle que no se como acomodar no encuentro la manera de que los videos de youtube queden centrado en el post alguien me puede hechar la mano
       
      http://img.fenixzone.net/i/t8FdzXK.png
       
      Otro detallito que tengo que al compartir en facebook no agrega una descripción dejo capturas 
       
      http://img.fenixzone.net/i/lSmt9wD.png
    • By KillerJohn
      Hola a [email protected]!  
      Solo abro este topic para pedir si alguien puede adaptar este mod de @Kmario19  
       
       
      pero q en un pequeño cuadro en la home muestre a todos los users quien esta en pages/chat
      no pude hacerlo porque no hay un chat.php y eso me complicó  
      Bueno desde ya muchas gracias!
       
       
      PD.: killeringa.org    Theme V5
    • By KillerJohn
      Hola gente!   aver si puede alguien aclarerme esta duda... resulta q intento limitar el mehu de ''IMAGENES'' ( head_menu.tpl ) para q no sea visible ni para no registrados ni para novatos... lo he puesto asi:
      {if $tsConfig.c_fotos_private == '1' && !$tsUser->is_member && $tsUser->info.user_rango != 3}{else}<li><a {if $tsPage == 'fotos'}class="estoy"{/if} href="{$tsConfig.url}/fotos/">Im&aacute;genes</a></li>{/if} Pero no funciona.... como es la forma correcta?  GRACIAS!!
       
       
       
      PD.: sitio   killeringa.org   Theme V5
    • By KillerJohn
      Hola!   consulta tècnica....   resulta que tengo 3 avisos en moderación , pero al entrar no hay nada ahí.Yo supongo que por ejemplo en cuanto al aviso de denuncia en post es porque  la cuenta del user fue eliminada antes de aceptar o rechazar la denuncia,pero no lo se... adjunto imagen:
       
       
       

       
       
      Por lo cual en administracion/configuracion no puedo activar los avisos '' Vista moderativa amplia '' ...
       

       
      ya que si lo hago constantemente aparecen esos avisos antes mencionados ...
       

       
       
       
      Muchas gracias desde ya por cualquier ayuda!  
       
       
      Site: killeringa.org    
      Theme:V5
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Patrocinador



  • ×