How do I add audio and video to my Website Builder site?

You can add audio and video to your site in Website Builder with HTML and the code component. In this guide, we explain how.

Step 1 - Upload the audio or video file to your webspace

Step 2 - Open Website Builder

Step 3 - Embed the code in Website Builder

Step 4 - Save and Publish

Note: With the Video component you can embed Youtube videos. That way your video is located elsewhere and doesn't count towards your disk usage. You can find it in the component menu to the left under More > Video.

Step 1 - Upload the audio or video file to your webspace

First, you need to upload your audio or video file to your webspace using File Manager or FTP. Audio should be in mp3 format and video in mp4.

1. Log in to the one.com control panel.
2. Open File Manager on the Files & Security tile.
3. Click + Upload and select the audio (mp3) or video (mp4) file you want to embed in your site.
4. Copy the full path to your file and paste it in a text file for later use.

Step 2 - Open Website Builder

1. Open Website Builder.
2. Click Code in the component menu to the left.
3. Click the expand icon for a bigger view.

Step 3 - Embed the code in Website Builder

1. Copy one of the code samples below, and paste it in the code component in Website Builder.
2. Replace FULL PATH in the code sample with the full path to your audio or video file.
3. Click Save.
4. Click Add, to insert it in your workspace.

Choose one of the samples below, or create your own code with the HTML <audio> tag and HTML <video> tag. Remember to replace FULL PATH with the full path to your audio or video file.

Embed an mp3 audio file:

<audio controls>
<source src="FULL PATH" type="audio/mpeg">
</audio>

Embed an mp3 audio file that starts playing automatically:

<audio controls autoplay>
<source src="FULL PATH" type="audio/mpeg">
</audio>

Note: Some browsers limit autoplaying of audio or video, despite adding it your code.

Embed an mp4 video file:

<video width="640" height="480" controls>
<source src="FULL PATH" type="video/mp4">
</video>

Embed an mp4 video file that starts playing automatically:

<video width="640" height="480" controls autoplay>
<source src="FULL PATH" type="video/mp4">
</video>

Tip: The default size of the video is 640x480. You can change the size by adjusting the numbers for width and height in the code.

Step 4 - Save and Publish

1. Drag the component to the place where the file should be located on your site.
2. Click Preview to check if it looks how you want.
3. If everything is good, click Save and Publish to make your changes visible online.

Tip: Add a box component to your site with the same dimensions as your video and attach the code component to the box. It makes the placement of the audio or video easier to control. The size of the video is determined by the height and width in the HTML-code.

Related articles:

What can I do with a container component?

Using the Mobile view editor