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

KillerJohn

V.I.P
  • Contenido

    749
  • Mensajes en Chat

    3486
  • Registrado

  • Última Visita

Reputación en la Comunidad

116 Emprendedor

Sobre KillerJohn

  • Rango
    Quinientos Pips

Métodos de contacto

  • Sitio web
    http://www.killeringa.org

Visitantes recientes en el perfil

7279 visitas al perfil
  1. Video como Background

    Hola gente! 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!
×