1. Home
  2. Docs
  3. WP User Frontend Documentation
  4. Post Forms
  5. How to Upload or Embed Playable Audio & Video Files Using Post Forms

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

With WP User Frontend Pro 2.9.0, 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:

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

Step: 3

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

  • File Upload
  • Advanced Options

File Upload

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 / 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 from:

  • Required:

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

Advanced Options

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

  • 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 in 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.

  • Make Audio/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 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 with respect to the selection of another field.

Step: 4

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

How this field works from frontend

After logging in, your user will be able to see the Post Form:

On clicking the “Select Files” field, your user will be able to upload any sort of Audio / Video files from his PC hard drive.

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

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

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:

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 / 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 from:

  • 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 of 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 of 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 9 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 or Logged in users or to only Subscribers only.
  • Conditional Logic: Use this option to hide or show this field with respect to 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 keep the changes.

How the user will experience the field from frontend

This is the frontend view of the field:

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

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

And that's all about uploading field and embedding field of WP User Frontend.

Was this article helpful to you?

How can we help?