Video Field

Store a URL to a third party video provider and enable embedding the video stream

Options#

  • Restrict (optional) – Restrict the video URL to a specific provider. By default Enact ships with support for Youtube & Vimeo.

Video Provider Configurations#

Provider configurations are defined in enact/config/video.json and allow for any number of third party providers to be configured for use with Enact. The json config file consists of two main parts:

  • attributes (object) – Attributes which will be applied to all video iframe elements.

  • providers (array of objects) – The providers which can be used with the video field. A provider consists of:

    • name (string) – The name of the provider (eg : Youtube ).

    • iframe_url (string) – The URL of the providers iframe with a placeholder for the video id {video_id} (eg : https://www.youtube.com/embed/{video_id}).

    • id_regex (string) – The regular expression used to parse the URL pasted into the video field input for the appropriate video_id (eg : youtube.com/watch\\?v=([a-zA-Z0-9-_]+) ), make sure you wrap the video id regex in quotes to perform a capture.

    • attributes (object) – Optional attributes to be applied to the iframe for this provider.

Use#

Content creators will simply paste the video url into the input.

If the url entered isn't supported an error will be shown and the entry will not be update-able until a valid url is entered, or it is removed

If the field has been set to required then the entry will not be update-able until a valid video has been input.

Template Use#

Access your video fields via the handle you set for the field.

{% set video = entry.yourVideoFieldHandle %}

To get the video iframe element with its defaults attributes set simply call the field by its handle

{{ entry.yourVideoFieldHandle }}

The same result can be achieved by calling getVideoHtml. You can also pass the getVideoHtml method an array of attributes to apply to the iframe element, which will take precedence over any of the default attributes established by your enact/config/video.json file.

{{ entry.yourVideoFieldHandle.getVideoHtml({ 'class' : 'my-video-class' }) }}

Using the fullWidth method you can force the iframe to scale to its parent container size.

{{ entry.yourVideoFieldHandle.fullWidth }}

{{ entry.yourVideoFieldHandle.fullWidth.getVideoHtml({ 'class' : 'video-class'}) }}

Get the attributes that will be applied to the iframe element using the getAttributes method.

{% set atts = entry.yourVideoFieldHandle.getAttributes %}