Background video

background video css

Background video o videos de fondo para páginas web: Vamos a complicar un poco el código web para generar una película de fondo, un film encima de otro. esto nos puede ir muy bien para creacion de paginas web

Para empezar generaremos un svg  básico con los dos videos superpuestos, sugiero la lectura de blog anteriores donde espico como se realiza esto.

Lógicamente  al film superior debemos darle algún tipo de transparencia porque si no el video posterior de la pagina web no se veria, esto lo lograremos dando algún un grado de opacidad con css y colocando al fondo un video o background video

Como hemos comentado alguna vez ,dentro del svg podemos meter directamente propiedades css sin tener que ponerlas en un archivo externo

<style type="text/css">	
		#segundovideo{
			opacity: 0.5;
			 transform: scale(2.);
		}
	</style>

Como se ve en el código web la forma de incrustar propiedades css  dentro del grafico svg se realiza con la etiqueta de entrada y cierre “style” y dentro de ella podemos colocar cualquier tipo de propiedad css .

Como en cualquier propiedad css podemos llamar a nuestro objeto ya sea por el nombre de su clase como por su indicador. En este caso se ha generado la propiedad de opacidad que repercute sobre la transparencia de video superior y se ha aumentado el tamaño del video  con la propiedad “trasform” para poderlo escalar y quede todo proporcionado al tamaño del svg

<svg class="img-responsive" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="500" height="300" viewBox="0 0 500 300">			

<style type="text/css">	
	#segundovideo{	
		opacity: 0.5;	
		 transform: scale(2.);	
	           }	
</style>

  <foreignObject  width="500" height="300"> 
      <video  autoplay="autoplay" loop="loop"   muted="muted"  preload="auto"     width="500" height="300"  class="a491h"  >   		
          <source src="https://animacionesweb.online/videos/Spaceship-33411g.mp4" type="video/mp4"/>           </video>	
  </foreignObject>	

 <foreignObject id="segundovideo" width="500" height="300"  x="0" y="0" >   
      <video  autoplay="autoplay" loop="loop"   muted="muted"  preload="auto"       width="500" height="300" class="a491h"  >     
         <source src="https://animacionesweb.online/videos/Nebula-6044s.mp4" type="video/mp4"/>      
     </video> 
</foreignObject>	
</svg>

En este blog hemos puesto el código de lo que sería dos videos dentro de un gráfico svg uno encima del otro al que a video superior le hemos generado una clase css de transparencia y todo ello en un solo archivo svg sin ningún tipo de archivo externo, esto nos da una gran ventaja de independencia a la hora de del desarrollo web con videos al no depender de ningún plugin ni framework externo, cualquier duda del código no te lo plantees y dímelo en los comentarios estaré muy agradecido

un saludo

Deja un comentario