Vídeo flotante de youtube en html

0
573

Hola Furiosos y furiosas de los códigos, estrenamos blog con este pequeño tutorial.

Esta es una buena técnica para conseguir retención de audiencia y visualización de minutos de tu canal youtube. Vamos al Grano.

Insertar Vídeo flotante de youtube en html o wordpress.

Vídeo flotante de youtube en html

Vídeo flotante de youtube en html

en primer lugar vamos a analizar el código. Vamos a necesitar un archivo css, un archivo javascript y por último un html. Si solo quieres ver el código fuente del proyecto lo tienes aqui impaciente.

Descargar archivos del proyecto

<h6>body <a href="https://labkarmon.com/category/tutoriales/html/" target="_blank" rel="noopener noreferrer">html</a> head estructura</h6>

<section class="main-wrapper"><section class="level one">contents</section>
<p class="play-video">Play the Video and Scroll Down !!!</p>


<section class="videowrapper ytvideo">
<div class="gradient-overlay"></div>
<i class="fa fa-arrows-alt" aria-hidden="true"></i>
<iframe class="featured-video" src="https://www.youtube.com/embed/HoucLJrvmhM?enablejsapi=1&?rel=0& controls=0&showinfo=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

</section>

<section class="level two">contents</section>

<section class="level three">contents</section>

<section class="level four">contents</section>

<section class="level nine">contents</section>

<section class="level ten">contents</section>

<section class="level five">contents</section>

<section class="level five">contents</section>

<section class="level six">contents</section>

<section class="level seven">contents</section>

</section>

Ejemplo tutorial : Demo

Para que aparezcan los controles del video solo tienes que reemplazar esta línea en la llamada del src del iframe

src="https://www.youtube.com/embed/HoucLJrvmhM?enablejsapi=1&?
rel=0&controls=0&showinfo=0" frameborder="0"


por esta otra cambiando el valor de 0 por 1 en el parámetro controls.

src="https://www.youtube.com/embed/HoucLJrvmhM?enablejsapi=1&?
rel=0&controls=1&showinfo=0" frameborder="0"

Si queréis investigar más sobre este efecto de video flotante o dejamos el link del proyecto. En siguiente tutoriales o mostraremos como implementar este efecto en wordpress sin plug.

Un saludo esperamos que te sea de ayuda nuestro contenido de tutoriales para mejorar tus proyectos profesionales.

Dejar respuesta

Please enter your comment!
Please enter your name here