Tassos Marinos Developer of Joomla Extensions

The HTML5 Video Field

Updated 03 Jul, 2023

The HTML5 Video custom field gives you the ability to display an HTML5 Video at your frontend just by filling out the URL or the relative path of the video file.

How to add a HTML5 Video Custom Field to Joomla! Articles

The HTML5 Video field provides you all of the customization options of the HTML5 Video Specification.

acf-html5-video-field-settings

Let's see what each option does.

Name Description
Name The name will be used to identify the field. Leave this blank and Joomla will fill in a default value from the title.
Label The label of the field to display.
Description A description of the field that will be displayed in the label tooltip.
Required Is this a mandatory field?
Width Sets the width of the player
Height Sets the height of the player
Auto Play Specifies that the media file will start playing as soon as it is ready
Controls Specifies that player controls should be displayed (such as a play/pause button etc).
Loop Specifies that the player will start over again, every time it is finished
Muted Specifies that the audio output of the video should be muted
Preload Specifies if and how the video should be loaded when the page loads

Usage

Once you are in your Article's Edit screen, choose the "Fields" Tab to see the HTML5 Video custom field as you can see in the screenshot below.

acf-html5-video-usage

In this textbox you can type in the full URL or the relative local path of the Video file.

Frontend Display

Take a look at the screenshot below to see how it could be displayed in your frontend.

acf-html5-video-frontend

Frequently Asked Questions

How can I override the layout of "ACF - HTML5 Video" custom field?

To override the "ACF - HTML5 Video" custom field, read here: How to override the "ACF - HTML5 Video" custom field.