Cómo añadir audio y vídeo a tu sitio web creado con el Creador de sitios web mediante código

Además de utilizar uno de nuestros numerosos widgets, también puedes añadir archivos de audio y vídeo a tu sitio web en el Creador de sitios web mediante HTML y el componente de código. En esta guía te explicamos cómo hacerlo.

• Paso 1: Sube el archivo de audio o vídeo a tu espacio web
• Paso 2 - Abre Website Builder
• Paso 3: Incrusta el código en el creador de sitios web
• Paso 4 - Guarda y publica

Nota: El componente de código es una función de Website Builder Premium y Business + Ecommerce. Si actualmente utilizas Starter, puedes actualizar tu plan o utilizar el widget hrefhttps://help.one.com/hc/en-us/articles/9172763029393hrefYouTube en su lugar. 

Paso 1: Sube el archivo de audio o vídeo a tu espacio web

En primer lugar, sube tu archivo de audio o vídeo a tu espacio web mediante el Administrador de archivos o FTP. Los archivos de audio deben estar en formato mp3 y los de vídeo en mp4.

1. Inicie sesión en el panel de control de one.com.
2. Abre el Administrador de archivos en la sección «Configuración del alojamiento» del menú de la izquierda.
3. Haz clic en «+ Subir» y selecciona el archivo de audio (mp3) o de vídeo (mp4) que quieras insertar en tu sitio web.
4. Copia la ruta completa del archivo y pégala en un archivo de texto para poder usarla más adelante.

Paso 2 - Abre Website Builder

1. Abre el creador de sitios web.
2. Haz clic en «Widgets» en el menú de componentes de la izquierda.
3. Desplázate hacia abajo y selecciona «Código».

Paso 3: Incrusta el código en el creador de sitios web

1. Copia uno de los ejemplos de código que aparecen a continuación y pégalo en el componente de código de Website Builder.
2. Sustituye «FULL PATH» en el ejemplo de código por la ruta completa a tu archivo de audio o vídeo.
3. Haz clic en Guardar.

Elige uno de los ejemplos que aparecen a continuación o crea tu propio código utilizando las etiquetas hrefhttps://www.w3schools.com/tags/tag_audio.asphrefHTML <audio> y HTML <video>. Recuerda sustituir «FULL PATH» por la ruta completa de tu archivo de audio o vídeo.

Audio:

Incrustar un archivo de audio MP3:

</audio>

Incrusta un archivo de audio MP3 que se reproduzca automáticamente:

</audio>

Nota: Algunos navegadores limitan la reproducción automática de audio o vídeo, incluso aunque lo hayas añadido a tu código.

Video:

Incrustar un archivo de vídeo MP4:

</video>

Incrusta un archivo de vídeo MP4 que se reproduzca automáticamente:

</video>

Consejo: El tamaño predeterminado del vídeo es 640x480. Puedes cambiar el tamaño modificando los valores de anchura y altura en el código. También puedes hacer que el vídeo se adapte a la pantalla del usuario cambiando la anchura a «100 %» (width="100%") y la altura a «auto» (height="auto").

Paso 4: Guardar y publicar

1. El componente ya se habrá añadido a tu espacio de trabajo. Arrastra el componente hasta la ubicación en la que debe aparecer el archivo en tu sitio web.
2. Haz clic en «Vista previa» para comprobar si el resultado es el que deseas.
3. Si todo está bien, haz clic en «Guardar y publicar» para que los cambios se vean reflejados en línea.

Consejo: Añade un componente box a tu sitio web con las mismas dimensiones que tu vídeo y vincula el componente de código a ese cuadro. Esto facilita el control de la ubicación del audio o el vídeo. El tamaño del vídeo viene determinado por la altura y la anchura que se indiquen en el código HTML.

Artículos relacionados:

• What, ¿qué puedo hacer con un componente de contenedor?
• Uso del editor de vista móvil