Videos para su página web

En alguna ocasiones hemos tenido la necesidad de agregar un video en la página principal de una web y este video debe ocupar toda la pantalla. Primero, es complicado encontrar videos de buena calidad que se ajusten a estas especificaciones y lo que encontramos son de pago y segundo, necesitamos hacerlo son que nos consuma mucho tiempo y crear el css y el jquery para que todo funcione bien puede llevarnos un rato.

Veed.Me & CodersClan han pensado en esto y nos entregan una elegante y efectiva solución. Han creado Coverr, en este sitio encontramos una variada cantidad de videos, con actualizaciones semanales todos los lunes cuando suben 7 nuevos videos. Todas las descargas son gratuitas y hasta nos entregan detallas instrucciones de cómo agregar el código HTML, CSS y JavaScript para que el video tenga la funcionalidad deseada.

Sólo son 4 pasos muy rápidos para poner en funcionamiento el video:

1. Descargar el video de nuestro gusto.
2. Agregar el código html

   
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   <div class="homepage-hero-module">
   
       <div class="video-container">
   
           <div class="filter"></div>
   
           <video autoplay loop class="fillWidth">
   
               <source src="PATH_TO_MP4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
   
               <source src="PATH_TO_WEBM" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
   
           </video>
   
           <div class="poster hidden">
   
               <img src="PATH_TO_JPEG" alt="">
   
           </div>
   
       </div>
   
   </div>
   
   

3. Agregar los estilos CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.homepage-hero-module {

    border-right: none;

    border-left: none;

    position: relative;

}

.no-video .video-container video,

.touch .video-container video {

    display: none;

}

.no-video .video-container .poster,

.touch .video-container .poster {

    display: block !important;

}

.video-container {

    position: relative;

    bottom: 0%;

    left: 0%;

    height: 100%;

    width: 100%;

    overflow: hidden;

    background: #000;

}

.video-container .poster img {

    width: 100%;

    bottom: 0;

    position: absolute;

}

.video-container .filter {

    z-index: 100;

    position: absolute;

    background: rgba(0, 0, 0, 0.4);

    width: 100%;

}

.video-container video {

    position: absolute;

    z-index: 0;

    bottom: 0;

}

.video-container video.fillWidth {

    width: 100%;

}

4. Agregar el código JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
//jQuery is required to run this code

$( document ).ready(function() {



    scaleVideoContainer();



    initBannerVideoSize('.video-container .poster img');

    initBannerVideoSize('.video-container .filter');

    initBannerVideoSize('.video-container video');



    $(window).on('resize', function() {

        scaleVideoContainer();

        scaleBannerVideoSize('.video-container .poster img');

        scaleBannerVideoSize('.video-container .filter');

        scaleBannerVideoSize('.video-container video');

    });



});



function scaleVideoContainer() {



    var height = $(window).height() + 5;

    var unitHeight = parseInt(height) + 'px';

    $('.homepage-hero-module').css('height',unitHeight);



}



function initBannerVideoSize(element){



    $(element).each(function(){

        $(this).data('height', $(this).height());

        $(this).data('width', $(this).width());

    });



    scaleBannerVideoSize(element);



}



function scaleBannerVideoSize(element){



    var windowWidth = $(window).width(),

    windowHeight = $(window).height() + 5,

    videoWidth,

    videoHeight;



    console.log(windowHeight);



    $(element).each(function(){

        var videoAspectRatio = $(this).data('height')/$(this).data('width');



        $(this).width(windowWidth);



        if(windowWidth < 1000){

            videoHeight = windowHeight;

            videoWidth = videoHeight / videoAspectRatio;

            $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});



            $(this).width(videoWidth).height(videoHeight);

        }



        $('.homepage-hero-module .video-container video').addClass('fadeIn animated');



    });

}

Esta es una muy buena alternativa para diseñadores y programadores que permite una rápida implementación de video en una página web.