Cómo hacer flotar un video en HTML, CSS, Javascript

Hola a todos, esta es la continuacion de la que podria ser la serie sobre un video con boton de reproduccion. En esta publicacion vamos a continuar agregandole una nueva accion al video. Continuando donde nos quedamos en la anterior publicacion, vamos a ver como hacer flotar un video en HTML, CSS y Javascript.

Como hacer flotar el video

Creando el contenedor padre que va a controlar la posicion del video.

<div id="showVid">        
        <div class="thevideo">            
            ...
        </div>
</div>

Agregando el estilo CSS que hara flotar el video:

<style>
  .floatvideo{position: fixed; bottom: 5px; right: 5px; width: 350px; animation: 1s forwards fadein;}
  @keyframes fadein{from{opacity: 0;}}
</style>

LLamando el contenedor en javascript para que se oculte y aparesca en una posicion abajo en la pagina:

var videoBox = document.querySelector('#showVid');

window.onscroll = function() {
   if(document.body.scrollTop > theVideo.clientHeight || document.documentElement.scrollTop > theVideo.clientHeight){
       videoBox.classList.add('floatvideo');

   } else{
       videoBox.classList.remove('floatvideo');

   }            
};

El script de arriba se ejecuta en el momento en el que navegamos por la pagina. Al ir al contenido que se encuentra fuera de la pantalla (abajo), «window.onscroll» va a ejecutar una funcion que mostrara el video flotando abajo y a ocultarlo cuando regresemos al principio de la pagina.

Creando el boton de cerrar

Para cerrar el video, crearemos un boton que nos permitira ocultar el video cuando esta flotando. Este boton no se vera a menos que pasemos el cursor por encima del video. Este boton vamos a incluirlo como un contenido flotando en la parte superior derecha del video y se encontrara dentro del «div» con la clase «theVideo«, justo debajo de el contenido de la targeta que presentamos en esta publicacion. Esto lo haremos de esta forma:

<div id="showVid">        
        <div class="thevideo">            
            ...
            <div id="cloVid" class="closingVid"><p>Close video | <span style="cursor: pointer; padding-left: 10px;" onclick="closevid()">X</span></p></div>
        </div>
</div>

Y para obtener el resultado de la imagen que muestro arriba, aqui esta el estilo css:

<style>
....
.thevideo .closingVid{position: absolute; top: 0; right: 0; padding: 0 15px; background-color:rgba(0, 0, 0, .5); font-size: 18px; color: white; display: none; opacity: 0; transition: .3s;}
.thevideo:hover .closingVid{opacity: 1;}
.thevideo .closingVid span:hover{color: yellow;}
.....
</style>

Para acceder al boton lo haremos con javascript, pues queremos que solo se muestre cuando esta flotando.

var closeVideo = document.querySelector('#cloVid');

Y dentro de la funcion creada en «window.onscroll» vamos a hacerlo visible agregando el estilo de display de esta forma:

....
if(document.body.scrollTop > theVideo.clientHeight || document.documentElement.scrollTop > theVideo.clientHeight){
   ...
   closeVideo.style.display = "block";
} else{
   ...
   closeVideo.style.display = "none";

}
....

La funcion de cerrar y reiniciar el video

Ahora, vamos agregar la funcion que cerrara la ventana de video asi como la funcion que reiniciara el video en su pocision original. Lo primero sera crear un bloque «div» que tendra la opcion de reiniciar el video. Este bloque solo sera visto cuando se cierre el video que esta flotando y se ocultara una vez se ejecute la funcion de reiniciar el video.

Aqui esta la funcion que cierra el video:


function closevid(){
   theVideo.style.display = "none";
   reloadVid.style.display = "block";
   vidEnd();
}

Y esta es la funcion que reinicia el video en su lugar original:


function reloadVidFun(){
   reloadVid.style.display = "none";
   theVideo.style.display = "block";
   vidEnd();
}

Ademas de la funcion de reiniciar, incluiremos el codigo html y el estilo css que esta funcion va a llamar.

html codigo va encima del bloque del video

<div id="reloadVid">
    <span class="reloVid" onclick="reloadVidFun()">&#x21bb;</span>
</div>
<div id="showVid">
  ...

Y el estilo de este bloque sera este:


#reloadVid{background-color: #222; width: 100%; height: 300px; display: none; position: relative;}
#reloadVid .reloVid{transition: .5s; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: white; font-size: 60px; font-weight: 900; cursor: pointer;}
#reloadVid .reloVid:hover{text-shadow: 0 0 10px white;}

Resultado del bloque de reiniciar cuando ejecutamos la funcion «closevid()» para cerrar el video.

La funcion «vidEnd()» no es mas que la funcion que rebobina el video a su estado inicial que presentamos en la publicacion del video con boton play. La modificacion esta dada por la necesidad de reutilizar el contenido sin ocupar mas espacio. Aqui esta la modificacion, si desean ver el codigo lo pueden ver aqui.


function vidEnd(){
   theTxt.style.opacity = "1";
   theTxt.style.transition = "all .5s";
   theTxt.style.display = "block";

   targeta00.classList.remove('slideupanim');
   theVideo.load();
   theVideo.controls = false;
}
theVideo.onended = function(){
   vidEnd();
};

Resultado final de este tutorial

The Digital Mike