Using code to add audio and video to your Website Builder site

Aside from using one of our many widgets, you can also 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: The code component is a Website Builder Premium and Business + Ecommerce feature. If you currently use Starter, you can upgrade your tier or use the YouTube widget instead. 

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

First, 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 of your file and paste it into a text file for later use.

Step 2 - Open Website Builder

1. Open Website Builder.
2. Click Widgets in the component menu to the left.
3. Scroll down and select Code.

Step 3 - Embed the code in Website Builder

1. Copy one of the code samples below, and paste it into 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.

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.

Audio:

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 the auto-playing of audio or video, even if you've added it to your code.

Video:

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. You can also make the video responsive to the viewer's screen by changing the width to "100%" (width="100%") and the height to "auto" (height="auto").

Step 4 - Save and Publish

1. The component will now have been added to your workspace. Drag the component to 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