Cómo mostrar vídeos a pantalla completa en HTML


En este tutorial les voy a enseñar como poner el vídeo en pantalla completa por medio de html, para que lo usen en la sección html avanzado si vienen por mi grupo de WhatsApp o canal de YouTube, si encontraron este tutorial por Google, también les servirá.

El código que usaremos ya viene con bloqueador de anuncios, para que no salgan esas ventanas emergentes tedioso en el dispositivo arruinando todo.{alertSuccess}


Lo primero que deben hacer es copiar el código y pegarlo en el programa que usen para editar código, en mi caso usaré Atom, es muy bueno y se lo recomiendo, si lo quieren descargar, dejaré su sitio web disponible.

{getButton} $text={Atom} $icon={link} $color={Hex Color}

También pueden usar el bloc de notas o editarlo directamente en Appcreator24, lo importante es que estén cómodos.

Vídeos de Uqload

El código que van a usar este:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%"
<iframe allowfullscreen="" frameborder="0" height="215px" id="iframe2" onload="$('.iframe-loading').css('background-image', 'none');" sandbox="allow-same-origin allow-scripts" scrolling="no" src="https://uqload.org/embed-56y7viuwr8sl.html" style="border: none;" width="100%"></iframe>
</iframe>
</div>
</body>
</html>{codeBox}

El código ya viene listo para usar, solamente deben cambiar es la url que está en rojo por la suya, es decir, si usarán una url de Uqload, simplemente borran ese y pegan el suyo y listo, no hace falta hacerle nada más.

Vídeos de YouTube

Si lo que van a usar son vídeos de YouTube, pueden usar este:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%"
<iframe allowfullscreen="" frameborder="0" height="215px" id="iframe2" onload="$('.iframe-loading').css('background-image', 'none');" sandbox="allow-same-origin allow-scripts" scrolling="no" src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1" style="border: none;" width="100%"></iframe>
</iframe>
</div>
</body>
</html>{codeBox}

Todo lo dejan tal cual, lo único que deben cambiar es lo que está en rojo, el ID, lo que está en color naranja también lo dejan tal cual, para saber donde está el ID de un vídeo de YouTube, solo basta con copiar la url que está en la parte de arriba del navegador, sería algo como esto:

https://www.youtube.com/watch?v=Yio-648tDj4{codeBox}

De la url que hemos copiado, solamente vamos a necesitar lo que está en rojo, lo demás lo podemos eliminar, entonces, para que nuestro vídeo sirva, debe quedar así en el código:

https://youtube.com/embed/Yio-648tDj4?autoplay=1&controls=0&showinfo=0&autohide=1{codeBox}

Pegan el ID después del / y antes del ?, así como miran en el ejemplo de arriba, y listo, ya todo estaría listo para usar.

Otros servidores

Este código también se puede usar para otros servidores, solamente cambian la url y listo, ojo, deben poner la url embed, no la url que da el navegador, debe ser así:

https://uqload.org/embed-56y7viuwr8sl.html{codeBox}

Y no así:

https://uqload.org/-56y7viuwr8sl.html{codeBox}

Y eso fue todo, compartan este tutorial con sus amigos para que también sepan como se puede poner un vídeo en pantalla completa por html.

El código ha sido modificado por Isidro Caro y Steven Valderrama, para que tenga esta configuración, pantalla completa y bloqueador de anuncios.{alertInfo}

Publicar un comentario

Artículo Anterior Artículo Siguiente