USP Pro makes it easy for visitors to submit any supported type of file(s). In this quick tutorial, we’ll review three different ways that visitors may submit supported video files.

Pro Tip: The easiest way to display submitted video on the front end is to use the free Helper addon :)

Submit/Display video using WP’s oEmbed method

The easiest way to submit video is to use WordPress’ oEmbed method. Using this method, the user includes the URL of the video on its own line in the post-content field. Then after submission, WordPress uses oEmbed to automatically display the video on the front-end without ever importing the video into WordPress’ Media Library. Here are the steps:

  1. Include the shortcode [usp_content]
  2. Instruct the user to include the video URL on its own line (maybe provide a list of supported video sites)

The nice thing about this method is that you don’t need to worry about any video uploads because WordPress displays the video without importing/uploading anything. Instead, the video URL acts as a shortcode that WordPress uses to embed the video from the external site.

Submit/Display video by direct file upload

If you would rather upload the video into WordPress, you can do so using the [usp_files] shortcode. With this method, the user selects the video file(s) from their local machine. When the form is submitted, the video will be imported into the WordPress Media Library and its URL will be attached to the submitted post as a custom field. This enables you to display the files anywhere in your site using template tags and shortcodes. Here are the steps:

  1. Include the [usp_files] shortcode in the form
  2. The user selects the file(s) from local machine
  3. The files are uploaded to the Media Library
  4. The URLs for the files are attached as custom fields
  5. Use a shortcode or template tag to display on front-end

The nice thing about this method is that you have more control over when, where, and how the videos are displayed on the front-end. Further, whereas the oEmbed method doesn’t cover you if the remote video is deleted, uploading the videos into WordPress means that you’ll have a copy regardless of what happens to the original.

Example

To see an example of displaying imported video on the front-end, check out the tutorial, Displaying Images and Video.

Submit/Display video via URL

Lastly, it’s possible to display video that is submitted as a URL via custom field. For example, if you set up a custom field “Video URL” for users to enter the URL of their video, it will be attached to the submitted post as a video URL. You can use then use the custom field to display the video anywhere in your site using shortcodes and template tags. Here are the steps:

  1. Include and configure the [usp_custom] shortcode in the form
  2. The user adds the video URL
  3. The video URL is attached to the submitted post
  4. Use any template tags or shortcodes to display the video from the URL
Example

Here is some example code for displaying oEmbed video when using this method.

<?php // display video

$video_url = usp_get_meta(false, 'video-1');
$video = wp_oembed_get($video_url);

if (!empty($video)) {
    echo $video;
} else {
    // do something if no video URL is found   
} ?>

If you add that to your theme template (e.g., single.php), it will display the video that’s specified in the custom field named video-1. Change that to the name of the custom field that contains the video URL.

For example, in my USP Form, say I have include this shortcode:

[usp_custom_field form="video-1" id="1"]

After the user adds a video URL and submits the form, the video URL will be attached to the submitted post as a custom field. We can now add the code above in single.php, archive.php, and any other template that should display videos.

This technique could be repeated to display as many videos as required. For more information on how this technique works, check out oEmbed Excerpts for Custom Fields.

Related Resources