Cómo insertar videos en HTML

Descargar el PDF
Coescrito por Personal de wikiHow

Descargar el PDF

Este wikiHow te enseñará cómo insertar un video de YouTube en un sitio web pegando un código en el HTML, también aprenderás cómo insertar manualmente un video .mp4, .ogg o .webm usando el elemento <video> de HTML5.

Método 1
Método 1 de 2:

Insertar un video de YouTube

Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/75\/Embed-Video-in-HTML-Step-1-Version-2.jpg\/v4-460px-Embed-Video-in-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/75\/Embed-Video-in-HTML-Step-1-Version-2.jpg\/v4-728px-Embed-Video-in-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Haz clic en el título del video en YouTube para abrirlo y verlo.
    • También puedes usar este método en muchos otros sitios web para compartir videos. Aunque los nombres de cada enlace pueden ser distintos, generalmente podrás encontrar el enlace INSERTAR o Añadir a un sitio web en algún lugar del video que deseas incluir.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c8\/Embed-Video-in-HTML-Step-2-Version-2.jpg\/v4-460px-Embed-Video-in-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c8\/Embed-Video-in-HTML-Step-2-Version-2.jpg\/v4-728px-Embed-Video-in-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Está debajo del video (la opción que tiene una flecha que apunta hacia arriba). Aparecerá una lista de las opciones para compartir. [1]
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2a\/Embed-Video-in-HTML-Step-3-Version-2.jpg\/v4-460px-Embed-Video-in-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2a\/Embed-Video-in-HTML-Step-3-Version-2.jpg\/v4-728px-Embed-Video-in-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Es el primer ícono. Esta acción abrirá una ventana que contiene el código HTML en la parte superior derecha.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/35\/Embed-Video-in-HTML-Step-4-Version-2.jpg\/v4-460px-Embed-Video-in-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/35\/Embed-Video-in-HTML-Step-4-Version-2.jpg\/v4-728px-Embed-Video-in-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • Si quieres que el video empiece en un minuto específico, escoge “Empezar en”, luego ingresa el minuto en el que deseas que empiece (por ejemplo, "1:44", para reproducir el video a partir de la marca de 1 minuto y 44 segundos).
    • Marca la casilla que está al lado de “Mostrar controles del reproductor” para que los espectadores puedan ajustar el volumen, detener, iniciar y poner en pausa el video.
    • Si no deseas que YouTube recopile información sobre la persona que ve este vídeo, puedes marcar “Activar el modo de privacidad”.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1e\/Embed-Video-in-HTML-Step-5-Version-2.jpg\/v4-460px-Embed-Video-in-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1e\/Embed-Video-in-HTML-Step-5-Version-2.jpg\/v4-728px-Embed-Video-in-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Esta acción copia el código para insertar en el portapapeles.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a8\/Embed-Video-in-HTML-Step-6.jpg\/v4-460px-Embed-Video-in-HTML-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a8\/Embed-Video-in-HTML-Step-6.jpg\/v4-728px-Embed-Video-in-HTML-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Si usas una herramienta en línea para editar el sitio web, ve a la parte de la herramienta que te permite editar directamente el archivo HTML en la página en la que el video debe aparecer. Si editas el sitio a mano, abre el código fuente de esta página en el editor de texto que prefieras.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d9\/Embed-Video-in-HTML-Step-7.jpg\/v4-460px-Embed-Video-in-HTML-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d9\/Embed-Video-in-HTML-Step-7.jpg\/v4-728px-Embed-Video-in-HTML-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Puedes insertarlo en cualquier lugar del código HTML. Esta acción coloca el cursor en la posición deseada.
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/83\/Embed-Video-in-HTML-Step-8.jpg\/v4-460px-Embed-Video-in-HTML-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/83\/Embed-Video-in-HTML-Step-8.jpg\/v4-728px-Embed-Video-in-HTML-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    El código copiado de YouTube ahora aparecerá en el archivo HTML.
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/19\/Embed-Video-in-HTML-Step-9.jpg\/v4-460px-Embed-Video-in-HTML-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/19\/Embed-Video-in-HTML-Step-9.jpg\/v4-728px-Embed-Video-in-HTML-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para probar el video, abre la página en la que los has insertado en cualquier navegador, luego haz clic en el video para empezar a reproducirlo.
    Anuncio
Método 2
Método 2 de 2:

Usar el elemento video de HTML5

Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/76\/Embed-Video-in-HTML-Step-10.jpg\/v4-460px-Embed-Video-in-HTML-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/76\/Embed-Video-in-HTML-Step-10.jpg\/v4-728px-Embed-Video-in-HTML-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Este método es más adecuado para las personas que desean subir videos directamente a sus propios sitios web en vez de en un sitio para compartir como YouTube. También puedes usar este método si no deseas usar un “iframe” para insertar el video.
    • Sube el video como un archivo MP4 para asegurarte de que se vea bien en todos los navegadores web. Aunque el elemento video también es compatible con archivos de video WebM y Ogg, no se podrá reproducir en Safari. [2]
    • Debido a que la mayoría de los navegadores ya no son compatibles con los complementos externos que usen la etiqueta HTML <embed>, usar la etiqueta <video> asegura que la mayoría de los usuarios puedan ver tus videos. [3]
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/ff\/Embed-Video-in-HTML-Step-11.jpg\/v4-460px-Embed-Video-in-HTML-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/ff\/Embed-Video-in-HTML-Step-11.jpg\/v4-728px-Embed-Video-in-HTML-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Si usas una herramienta en línea para editar el sitio web, ve a la parte de la herramienta que te permite editar directamente el archivo HTML en la página en la que el video debe aparecer. Si editas el sitio a mano, abre el código fuente de esa página en el editor de texto que prefieras.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7c\/Embed-Video-in-HTML-Step-12.jpg\/v4-460px-Embed-Video-in-HTML-Step-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7c\/Embed-Video-in-HTML-Step-12.jpg\/v4-728px-Embed-Video-in-HTML-Step-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ingresa este código en la ubicación exacta en la que desees que el video aparezca y haz cambios al nombre y el tamaño del archivo para se adecúe a tus necesidades. Por ejemplo: <video src="wikihow.mp4" width="320" height="240" controls></video>
    • Reemplaza wikihow.mp4 por el nombre del archivo de video. Si el archivo de video está ubicado en algún otro lugar de la web, reemplázalo por la ruta URL completa al archivo (por ejemplo, ”https://www.wikihow.com/test.mp4”).
    • Puedes reemplazar los valores numéricos de anchura y altura para que se adecúen al tamaño del video.
    • La opción controles asegura que las personas que ven el video puedan poner pausa, reproducir, ajustar el volumen o detener el video cuando quieran.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e1\/Embed-Video-in-HTML-Step-13.jpg\/v4-460px-Embed-Video-in-HTML-Step-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e1\/Embed-Video-in-HTML-Step-13.jpg\/v4-728px-Embed-Video-in-HTML-Step-13.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para probar el video, abre la página en la que lo has insertado en cualquier navegador web, luego haz clic en el video para empezar a reproducirlo.
    Anuncio

wikiHows relacionados

Cómo
hacer antenas
Cómo
probar un relé
Cómo
probar un capacitor (condensador)
Cómo
escribir fracciones en una calculadora
Cómo
calcular el amperaje
Cómo
apagar una calculadora escolar
Cómo
escribir palabras con una calculadora
Cómo
usar tu computadora sin ratón
Cómo
poner acentos a las letras
Cómo
usar un multímetro digital
Cómo
escribir la raíz cuadrada en una computadora o Mac
Cómo
instalar un juego desde un archivo torrent
4 formas fáciles de pegar texto usando los atajos del teclado
Cómo
hacer soldaduras de estaño correctamente
Anuncio

Referencias

  1. ↑ https://support.google.com/youtube/answer/171780?hl=en
  2. ↑ https://www.w3schools.com/html/html5_video.asp
  3. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed

Acerca de este wikiHow

Esta página ha recibido 24 483 visitas.

¿Te ayudó este artículo?

Anuncio