Blog

25
Jun 2015

Videos para su página web

Posteado Por Catrian

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:
  4. 
    
    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%;
    }
  5. Agregar el código JavaScript:
  6. 
    
    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 &lt; 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

* Campo obligatorio