# Opciones para insertar vídeo en HTML en tu web

Desde la llegada de HTML5 existe una etiqueta nativa que permite integrar vídeos directamente como parte del contenido web. También puedes optar por alojar los vídeos en plataformas como YouTube o Vimeo e insertarlos en tu página mediante un código de inserción. En este artículo te mostramos cómo hacerlo de forma sencilla.

## HTML5: integra tus vídeos fácilmente

Insertar vídeos con HTML5 es una tarea muy sencilla. Lo único que se necesita es un elemento `video` nativo que pueda ser ampliado por medio de atributos especiales. El siguiente código muestra cómo añadir recursos de vídeo al código fuente de tu web

```html
<video src="ejemplo.mp4" width="320" "height="240" controls poster="vistaprevia.jpg">
    <p>Lo sentimos. Este vídeo no puede reproducirse en tu navegador.<br>
    La versión descargable está disponible en <a href="URL">Enlace</a></p>
</video>
```

El elemento `video` del ejemplo contiene la **URL del recurso de vídeo** (`src="ejemplo.mp4"`) así como los **atributos opcionales** `width`, `height`, `controls` y `poster`, que definen cómo se muestra el vídeo en la página web. El texto situado entre la etiqueta de apertura y la de cierre del elemento `video` solo se muestra cuando el navegador no puede reproducir el vídeo. Quienes gestionan páginas web suelen aprovechar esta función para ofrecer una descripción alternativa y un enlace de descarga al recurso.

### Los atributos adicionales de un elemento de vídeo en HTML5

Para integrar un recurso a través del elemento `video` es necesario que este contenga un enlace al recurso, ya sea como atributo `src` o elemento secundario `source`. Para modificar y gestionar un elemento de vídeo es posible valerse de los siguientes atributos:

<table>
  <thead>
    <tr>
      <th>Atributo</th>
      <th>Función</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`width`/`height`</td>
      <td>Los atributos `width` y `height` permiten indicar las dimensiones del vídeo. Si no se especifican, el elemento `video` utiliza la información de tamaño del archivo. Si defines solo uno de los dos atributos, el navegador ajusta automáticamente la proporción.</td>
    </tr>
    <tr>
      <td>`controls`</td>
      <td>Con el atributo `controls` se activa la barra de control nativa del navegador. Alternativamente, pueden definirse controles personalizados mediante JavaScript.</td>
    </tr>
    <tr>
      <td>`poster`</td>
      <td>El atributo `poster` permite enlazar una imagen que se mostrará como miniatura previa del vídeo. Si no se define, se utiliza el primer fotograma del vídeo como vista previa.</td>
    </tr>
    <tr>
      <td>`autoplay`</td>
      <td>Con el atributo `autoplay` indicas al navegador que inicie la reproducción automática del vídeo tras cargarse la página.</td>
    </tr>
    <tr>
      <td>`loop`</td>
      <td>El atributo `loop` hace que el vídeo se reproduzca en bucle de manera continua.</td>
    </tr>
    <tr>
      <td>`muted`</td>
      <td>Con el atributo `muted` el vídeo se reproduce sin sonido.</td>
    </tr>
    <tr>
      <td>`preload`</td>
      <td>El atributo `preload` da una indicación al navegador sobre cómo debe precargar el archivo de vídeo. Los valores posibles son: `auto` (por defecto, carga normalmente todo el archivo), `metadata` (carga solo los metadatos) y `none` (impide la precarga del vídeo).</td>
    </tr>
  </tbody>
</table>

Nota Ofrece a través de enlaces de texto dentro del elemento `video` **archivos de descarga alternativos** del vídeo, para que tus contenidos también estén disponibles en tu página web para quienes utilicen navegadores muy antiguos.

### Compatibilidad de códecs en HTML5

La especificación de HTML5 define el elemento `video` y la correspondiente [interfaz de programación (API)](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/application-programming-interface-api/), pero **no establece requisitos sobre la codificación de vídeo**. Esto supone un reto para los administradores de páginas web, ya que deben elegir el formato adecuado. Cada uno de los formatos de vídeo más comunes, como [WebM](https://www.ionos.mx/digitalguide/paginas-web/creacion-de-paginas-web/webm/), Ogg Theora o H.264, tiene ventajas e inconvenientes. Hasta ahora no existe un estándar común con soporte en todos los navegadores. La siguiente tabla resume la compatibilidad de códecs de vídeo en los navegadores más importantes:

<table>
  <thead>
    <tr>
      <th>Navegador</th>
      <th>H.264 (AVC)</th>
      <th>H.265 (HEVC)</th>
      <th>AV1</th>
      <th>VP9</th>
      <th>Ogg Theora</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Edge</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Firefox</td>
      <td></td>
      <td></td>
      <td>\*</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Chrome</td>
      <td></td>
      <td>\*</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Safari</td>
      <td></td>
      <td></td>
      <td></td>
      <td>\*</td>
      <td></td>
    </tr>
    <tr>
      <td>Opera</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

\*soporte parcial

Para **evitar incompatibilidades**, se recomienda ofrecer distintos formatos al insertar un vídeo en tu página web. El elemento `video` permite este propósito mediante el uso del elemento hijo `source`, que sirve para incluir varias fuentes de vídeo y especificar el formato con el atributo `type`:

```html
<video width="320" height="240" controls poster="vista-previa.jpg">
    <source src="ejemplo-av1.webm" type="video/webm; codecs=av01.0.05M.08">
    <source src="ejemplo-vp9.webm" type="video/webm; codecs=vp9">
    <source src="ejemplo.mp4" type="video/mp4; codecs=avc1.42E01E">
    Tu navegador no es compatible con la etiqueta de vídeo.
</video>
```

Cuando se añaden varios elementos `source` con su atributo `type` correspondiente dentro del elemento `video`, el navegador selecciona automáticamente el formato de vídeo que prefiera al cargar la página. Es importante tener en cuenta que, en este tipo de integración, el elemento `video` **no debe contener un atributo `src`** con un recurso.

## Insertar vídeos en una página web a través de una plataforma de vídeo

Quienes prefieren no insertar vídeos directamente con HTML, sino delegar el [alojamiento de vídeos](https://www.ionos.mx/digitalguide/online-marketing/vender-en-internet/video-hosting/) en un proveedor externo, pueden subir su material de forma gratuita a plataformas como YouTube o Vimeo e integrar los clips en su página mediante un **código de inserción**.

Dado que las plataformas de vídeo más populares garantizan la compatibilidad de sus contenidos con todos los navegadores importantes, los formatos que utilizan estos proveedores son compatibles en la mayoría de los dispositivos. La [externalización o outsourcing](https://www.ionos.mx/digitalguide/startup/gestion/outsourcing/) de vídeos tiene además la ventaja de que el propio servidor no se sobrecarga con el streaming. Sin embargo, conviene informarse previamente sobre las **condiciones de uso** del servicio de alojamiento de vídeo y adaptar el código de inserción a las necesidades propias.

Si quieres insertar un vídeo desde YouTube solo tienes que encontrarlo y solicitar el código correspondiente. Aquí también es posible definir algunos aspectos de la configuración general, tales como las dimensiones o los subtítulos. Para evitar la reproducción de contenido externo en tu web, es recomendable desactivar la función de vista previa de vídeos alternativos. De lo contrario, la plataforma de vídeo mostrará en el **reproductor incrustado** contenidos de otros usuarios asociados a palabras clave similares. En el peor de los casos, podrían aparecer vídeos de un competidor directo.

Consejo No te pierdas nuestro artículo sobre cómo [subir un vídeo a YouTube](https://www.ionos.mx/digitalguide/online-marketing/redes-sociales/como-subir-un-video-a-youtube/) para luego incrustarlo en tu página web.


This is a markdown version of: [https://www.ionos.mx/digitalguide/paginas-web/creacion-de-paginas-web/consejos-para-insertar-un-video-en-html-en-tu-web/](https://www.ionos.mx/digitalguide/paginas-web/creacion-de-paginas-web/consejos-para-insertar-un-video-en-html-en-tu-web/) for AI/LLM consumption.