The Digital Mike

Si seguimos el tutorial anterior sobre este video, nuestro aporte va a ser agregando un bloque el cual contiene la targeta o anuncio. Tengan en cuenta de que el bloque debe ser agregado dentro de la clase madre que contiene la posicion relativa, pues nuestro bloque va a tener una posicion absoluta. En el caso de este tutorial vamos a posicionarlo en la zona izquierda y abajo.

<div class="thevideo">
        <video src="assets/vid2.MOV" poster="assets/vid2_Moment.jpg" width="100%" id="myvideo"></video>
        ...
        <!-- Targetas -->
        <div class="targeta00">
            <div class="mycard">
                <h1><a href="#" target="_blank" style="color: white; text-decoration: none;">Subscribete</a></h1>
            </div>
        </div>
    </div>

Nuestro HTML se explica de esta manera:

• Insertamos un div con una clase targeta00 debajo de nuestro texto, asegurandonos de que la clase thevideo sea el padre directo del contenedor.
• Dentro de este div, crearemos el contenido, o la targeta que deseamos presentar. En mi caso, para hacerlo mas simple, solo voy a crear un titulo con un link que pedira al visitante de que se subscriba al canal.

Para el estilo de la targeta, vamos a insertar el codigo de abajo:

<style>
        .thevideo{margin: 30px 0; position: relative; overflow:hidden;}
        ...

        ...
        
        .thevideo .targeta00{position: absolute; bottom: 30px; left: 30px; opacity: 0; animation-delay: 6s;}
        .mycard{background-color: rgba(255, 0, 0, 0.4); padding: 2px 20px; border-radius: 15px 50px 50px 15px; transition: clip-path .5s; clip-path: polygon(0 100%, 100% 100%, 100% 0%, 0 0);}
        .mycard:hover{background-color: rgba(255, 0, 0, .6);clip-path: polygon(10% 100%, 100% 90%, 90% 10%, 0 0);  }
        .slideupanim{animation: 10s forwards slideup;}
        @keyframes slideup{
            from{bottom: -100px;clip-path: polygon(0 100%, 00% 00%, 00% 00%, 100% 00%);}
            15%{bottom: 50px; opacity: 1;}
            23%{clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);}
            82%{clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);}
            85%{bottom: 50px; opacity: 1;}
            to{bottom: -100px; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);}
        }
    </style>

La esplicacion del estilo sera la siguiente:

• A la clase master thevideo, le agregaremos overflow:hidden;, para que el contenido solo sea visible dentro del contenedor y no fuera de este.
• Como la clase thevideo tiene posicion relativa, nuestra clase targeta00 tendra la posicion absoluta y estara posicionada en el borde inferior izquierdo
• En la clase targeta00, deben darle importancia a la parte de la animacion-delay, pues esta es la que definira cuando es que se ejecutara la animacion. Aqui es donde deben conocer la duracion del video y elegir el tiempo de aparicion deseado.
• slideupanim: ejecutara la animacion que elaboraremos con @keyframes. Algo a tener en cuenta aqui es que la animacion debera tener una duracion lo suficientemente larga como para que el espectador pueda leer e interactuar con la targeta.
• Al final la animacion en cuestion, esta va a estar dividida de la siguiente forma: from define desde donde comenzara la animacion; 15%, 23%, 82% y 85% tendran el resultado final de la animacion, asi aseguramos que la targeta se mantenga en la posicion sin moverse, como si estuviense congelada ; y al final la opcion to la cual finaliza la animacion escondiendo la targeta.

Aqui agregaremos el script para el bloque. Como queremos que funcione solo cuando el video se reprodusca, vamos a incluir un script dentro de la funcion que ejecuta el video. Asi que, dentro de vidPlay() agregaremos la linea que presento abajo en el codigo. Recuerden incluir la variable que va a llamar a la clase bloque01. La explicacion del codigo es bastante simple: se declara la variable, y luego dentro de la funcion le agregamos la clase que anima la targeta. Para esto usaremos variable.classList.add(clase);

var targeta00 = document.querySelector('.targeta00'); 
function vidPlay(){
            ...

            targeta00.classList.add('slideupanim');
        }

La otra parte del codigo va a remover la animacion cuando el video finalice. Para eso agregaremos la linea variable.classList.remove(clase);, donde variable sera bloque01, y clase va a eliminar la animacion, en mi caso slideupanim.

theVideo.onended = function(){
            ...
            theTxt.style.display = "block";
            targeta00.classList.remove('slideupanim');
            theVideo.load();
            theVideo.controls = false;
        };

El resultado final es un vinculo que aparece por un tiempo y luego desaparece con el texto Subscribete, para subscribirse a un canal.