En los primeros días, agregar un video a una página web era un verdadero desafío, ya que había que convertir los videos a diferentes formatos para que se reprodujeran en todos los navegadores. Convertir videos a diferentes formatos puede ser difícil y llevar mucho tiempo. Ahora, agregar un video a una página web se ha vuelto tan fácil como copiar y pegar, y una solución muy adecuada para agregar videos a un sitio web es usar Youtube. Youtube ayuda a alojar un video para un usuario para que pueda integrarse aún más en las páginas web.
YouTube muestra una identificación como «BGAk3_2zi8k», cada vez que se guarda o reproduce un video. Esta identificación se usa además como una referencia para que el video de YouTube se incruste en la página web.
Pasos para agregar un video de Youtube en una página web:
- Cargue el video que desea incrustar en su página web en YouTube.
- Copie la identificación del video del video.
- Use iframe, objeto o elemento ‘incrustado’ en su página web para la definición de video.
- Use el atributo src para apuntar a la URL del video.
- Las dimensiones del reproductor se pueden ajustar usando los atributos de ancho y alto.
Pasos para obtener el ID de video de un video de youtube:
- Abra el video de youtube cuya identificación desea.
- Haga clic derecho en el video, desde el menú, seleccione «Estadísticas para nerds».
- El primer valor en el cuadro es la identificación del video.
La identificación del video de este video es: il_t1WVLNxk
Añadiendo vídeo de Youtube:
1) Usando la etiqueta iFrame:
<!DOCTYPE html> <html> <body> <iframe height="480" width="500" src="https://www.youtube.com/embed/il_t1WVLNxk"> </iframe> </body> </html>
Producción :
Habilitación de la función de reproducción automática de YouTube:
la función de reproducción automática de Youtube se puede usar para reproducir automáticamente un video cuando un usuario visita esa página.
Hay dos tipos de parámetros que se pueden utilizar:
- Valor 1: el video comienza a reproducirse automáticamente cuando se carga el reproductor.
- Valor 0 (caso predeterminado): el video no se reproduce automáticamente cuando se carga el reproductor.
<!DOCTYPE html> <html> <body> <iframe height="480" width="500" src="https://www.youtube.com/embed/il_t1WVLNxk?autoplay=1"> </iframe> </body> </html>
Producción :
Creación de una lista de reproducción de YouTube:
Se puede crear una lista de reproducción de videos de YouTube usando el carácter de coma que separa la lista de videos para reproducir.
El parámetro de bucle se utiliza para repetir el número de reproducciones en los videos:
- Valor 1: el video seguirá reproduciéndose una y otra vez.
- Valor 0 (caso predeterminado): el video se reproduce solo una vez.
<!DOCTYPE html> <html> <body> <iframe height="480" width="500" src="https://www.youtube.com/embed/il_t1WVLNxk/ AS_dAPN1Dlk?playlist=AfxHGNRtFac&loop=1"> </iframe> </body> </html>
Producción :
Habilitar / deshabilitar los controles de Youtube:
Youtube Player ofrece controles como reproducción, pausa, volumen, etc. que se pueden desactivar o activar mediante el parámetro de controles.
Hay dos parámetros disponibles que se pueden utilizar:
- Valor 1 (caso predeterminado): se muestran los controles del reproductor.
- Valor 0: los controles del reproductor no se muestran.
Para Habilitar Controles:
<!DOCTYPE html> <html> <body> <iframe width="440" height="372" src="https://www.youtube.com/embed/il_t1WVLNxk/?controls=1"> </iframe> </body> </html>
Producción :
Para deshabilitar controles:
<!DOCTYPE html> <html> <body> <iframe width="440" height="372" src="https://www.youtube.com/embed/il_t1WVLNxk/?controls=0"> </iframe> </body> </html>
Producción :
2) Usando la etiqueta del objeto:
<!DOCTYPE html> <html> <body> <object width="480" height="500" data="https://www.youtube.com/embed/il_t1WVLNxk"> </object> </body> </html>
Producción :
3) Usando la etiqueta de inserción:
<!DOCTYPE html> <html> <body> <embed width="480" height="500" src="https://www.youtube.com/embed/il_t1WVLNxk"> </body> </html>
Producción :
Nota: Hoy en día no se aprecia el objeto y la etiqueta incrustada, por lo que se recomienda utilizar la etiqueta iframe.
Publicación traducida automáticamente
Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA