Video Center - Integrar un vídeo en su sitio web

Utilice este método si dispone de acceso directo al código HTML de su página.

• Abrir el fichero HTML de su página: en su editor de código (Visual Studio Code, Dreamweaver, etc.), abra la página en la que desee mostrar el vídeo.
• Posicionar el cursor: colóquelo en el lugar deseado para el vídeo.
• Pegar el código embed: pegue el código copiado desde Video Center.
• Guardar y publicar: guarde el fichero y actualícelo en su servidor (FTP: File Transfer Protocol, despliegue, etc.).

Ejemplo de resultado en su fichero HTML:

<section class="ma-section-video">
  <h2>Ma présentation</h2>

  <iframe
    src="https://streaming.media.ovhcloud.com/vod/embed/XXXX-XXXX-XXXX"
    width="640"
    height="360"
    frameborder="0"
    allowfullscreen>
  </iframe>
</section>

La mayoría de los CMS ofrecen un bloque HTML personalizado para insertar código de terceros en la página.

• Abrir el editor de página: acceda a la edición de la página en la que desee mostrar el vídeo.
• Añadir un bloque HTML: en función de su CMS, utilice el bloque indicado a continuación.
• Pegar el código embed: en el campo del bloque HTML, pegue el código iframe copiado desde Video Center.
• Validar y publicar: confirme la inserción y publique la página.

Bloque que debe utilizarse según el CMS:

• Wix: App Wix > Código HTML.
• Squarespace: Bloque > Código.
• Webflow: Componente > Embed.
• Joomla: Editor > desactive el filtro HTML > pegue el código.
• PrestaShop: Módulo > HTML personalizado.

WordPress integra de forma nativa un bloque HTML personalizado en el editor Gutenberg. No es necesario ningún plugin.

• Abrir la página o la entrada: en el panel de WordPress, abra la página o la entrada en modo edición.
• Añadir un bloque HTML personalizado: haga clic en + para añadir un bloque y, a continuación, busque y seleccione HTML personalizado.
• Pegar el código embed: en el bloque HTML, pegue el código iframe copiado desde Video Center.
• Previsualizar: haga clic en Vista previa para comprobar el resultado antes de publicar.
• Publicar: haga clic en Actualizar o en Publicar.

Ajuste los atributos width y height en el código iframe:

<!-- Taille fixe standard (16:9) -->
<iframe src="..." width="640" height="360" ...></iframe>

<!-- Taille plus grande -->
<iframe src="..." width="1280" height="720" ...></iframe>

<!-- Largeur 100% du conteneur -->
<iframe src="..." width="100%" height="400" ...></iframe>

Envuelva el iframe en un contenedor CSS para que se muestre de forma fluida en todas las pantallas:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://streaming.media.ovhcloud.com/vod/embed/XXXX-XXXX-XXXX"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

Elimine el atributo allowfullscreen si desea impedir el modo pantalla completa:

<iframe src="..." width="640" height="360" frameborder="0"></iframe>

En función de la causa:

• La URL embed es incorrecta: vuelva a Video Center y copie de nuevo el código embed.
• El vídeo aún se está procesando: espere a que finalice la codificación en Video Center antes de integrarlo.
• El CMS filtra los iframes: active la autorización de los iframes en sus parámetros.
• El sitio está en HTTPS pero la URL embed está en HTTP: compruebe que la URL del iframe empieza por https://.

Algunos navegadores bloquean la reproducción automática con sonido. La reproducción manual (haciendo clic en Play) funciona con normalidad.

Utilice la técnica responsive descrita en el apartado Personalizar el reproductor de vídeo integrado más arriba con el contenedor CSS relativo.

Acceda a Ajustes > Lectura en WordPress y compruebe que los iframes externos no están bloqueados. Algunos plugins de seguridad (Wordfence, iThemes Security) pueden filtrar los iframes.