La forma más fácil de reproducir videos en HTML es usar YouTube. Convertir videos a diferentes formatos puede ser difícil y llevar mucho tiempo. Una solución más fácil es permitir que YouTube reproduzca los videos en nuestra página web.
YouTube Video Id
YouTube mostrará una id (como tgbNymZ7vqY), cuando guarde (o reproduzca) un video. Puede usar esta identificación y hacer referencia a su video en el código HTML.
Incluyendo un video de Youtube en HTML
Para reproducir un video en una página web, haz lo siguiente:
- Sube el vídeo a YouTube
- Toma nota de la identificación del video
- Define un elemento <iframe> en su página web
- Deja que el atributo src apunte a la URL del video
- Usa los atributos width y height para especificar la dimensión del video
- Agrega cualquier otro parámetro a la URL (ver más abajo)
Ejm
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"> </iframe>
YouTube Autoplay + Mute
Puedes permitir que su video comience a reproducirse automáticamente cuando un usuario visite la página, agregando autoplay = 1 a la URL de YouTube. Sin embargo, ¡iniciar automáticamente un video es molesto para sus visitantes!
Ejm
<!DOCTYPE html> <html> <body> <iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1"> </iframe> </body> </html>
YouTube Playlist
Una lista separada por comas de videos para reproducir (además de la URL original).
YouTube Loop
Agrega loop=1 para dejar que su video se reproduzca para siempre. Valor 0 (predeterminado): El video se reproducirá solo una vez. Valor 1: el video se reproducirá en bucle (para siempre).
Ejm
<!DOCTYPE html> <html> <body> <iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1"> </iframe> </body> </html>
Controles Youtube
Agrega controls = 0 para no mostrar los controles en el reproductor de video. Valor 0: los controles del reproductor no se muestran. Valor 1 (predeterminado): Visualización de los controles del reproductor.
Ejm
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0"> </iframe>