How to Upload or Embed Playable Audio and Video Files Using Post Forms

A- A+

With the premium version of the WP User Frontend, you can allow your users to upload or embed any audio or video file from the Post Forms.

Enabling Your Users to Upload an Audio or Video File

Step: 1

To do this, you will have to create a new form or select an existing form. If you don't know how to create a form, then read this tutorial.

Step:2

When you are at the form builder, from the “Add Fields,” select the “File Upload” field:

How to Upload or Embed Playable Audio and Video

After that, the “File Upload” field will be added to the form you are editing.

Customizing form edit

Step: 3

Under the “Field Options” tab, you will find two more options:

  • File Upload
  • Advanced Options

File Upload

Editing field options

Under File Upload Options, you will get four options. They are:

  • Field Label:

You can change the default field label, “Upload File,” to any name. For example, you can change the name to “Upload a Video or Audio.”.

  • Meta Key:

Generally, the meta keys generate automatically, though you can change the name of the meta key anytime.

  • Help Text:

Use help texts to give your users extra information, like which type of file you want them to:

  • Required:

Use this field if you want to force your user to upload a particular type of file.

Advanced Options

Advanced options of form

In advanced options, you will find nine more options. They are:

How to Upload or Embed Playable Audio and Video
  • Max file size: You can set the maximum file upload size limit in kilobytes.
  • Max files: Use this option to set the number of files that can be uploaded at a single time.
  • CSS class name: Use this option to manipulate cascading styles.
  • Allowed Files: With this option, you can specify which type of files your users will be able to upload.
Selecting allowed files
  • Make audio or video files playable: Use this option to enable your user to play the audio or video files right after submitting a post.
  • Preview Width: With this option, you will be able to change the preview height of a file.
Preview settings
  • Preview Height: With this option, you will be able to change the preview height of a file.
  • Show data in Post: If you don't want to show the uploaded files in Post, then you can use this field.
  • Conditional logic: Use this option to hide or show this field for the selection of another field.

Step: 4

Now, hit the “Save Form” button to keep the changes you have made just now.

How The Field Works from Frontend

After logging in, your user will be able to see the post form:

How this field works from frontend

On clicking the “Select Files” field, your user will be able to upload any sort of audio or video file from his PC's hard drive.

Uploading files

After the file is uploaded to the server, the user has to hit the submit button to post his video.

Submitting the form

Now, the user will be able to see a preview of the video he or she has uploaded. The user can also play the video if he or she wants to.

Preview of the video

Allow the User to Embed an Audio or Video File

Step: 1

To do this, you will have to create a new form or select an existing form. If you don't know how to create a form, then read this tutorial. After selecting a form, you will get the form editor.

Step: 2

Now, from the Add Fields tab, select the Embed option:

Allow the User to Embed an Audio or Video File

Step: 3

Click on the Edit option to get to the field options:

Under the Field Options tab, you will find two more options:

  • Embed
  • Advanced Options

Embed

Under the Embed option, you will get four more options. They are:

  • Field Label:

You can change the default field label, “Embed,” to any name. For example, you can change the name to “Embed a Video or Audio.”.

  • Meta Key:

Generally, the meta keys generate automatically, though you can change the name of the meta key anytime.

  • Help Text:

Use help texts to give your users extra information, like which type of file you want them to:

  • Required:

Use this field if you want to force your user to upload a particular type of file.

  • Preview width:

Use this option to give a certain width to the embedded file. This is useful when your user is going to preview the post upon submission.

  • Preview height:

Use this option to give a certain height to the embedded file. This is useful when your user is going to preview the post upon submission.

Advanced Options

In advanced options, you will find nine more options. They are:

  • CSS Class Name: Use this option to manipulate cascading styles.
  • Show Data in Post: If you want to show the uploaded files in the post, then you can use this option.
  • Visibility: Make this field hidden or visible, whether to everyone, logged-in users, or only subscribers.
  • Conditional Logic: Use this option to hide or show this field for the selection of another field.

That's all about uploading and embedding a playable audio or video file in WP User Frontend Pro.

Step: 3

Click the Save Form button to save the changes.

How The User Will Experience The Field from Frontend

This is the frontend view of the field:

How The User Will Experience The Field from Frontend

The user only needs to copy and paste the URL of a video into the field:

Post form preview

On submission of the form, the user will be able to view the preview, like below:

Embed files

And that's all about uploading fields and embedding fields in the WP User Frontend.