Interactive Search

Let your visitors search through your videos

TubePress provides an end-to-end, fully customizable solution for allowing your users to interactively search YouTube, Dailymotion, or Vimeo, all without leaving your website. The image below is a simple example showing an interactive search input along with a few results.

TubePress cache settings

Like everything else with TubePress, interactive searching has loads of options and is fully customizable to suit your needs. To use the feature, you'll need two invocations of TubePress on the page:

  • Once for displaying the search input and
  • Once more for displaying the user's search results

Let's go over each invocation in detail.

Search Input

Displaying a search input box and button is very easy with TubePress:

[tubepress output="searchInput"]

By default, the search form will submit back to the same page and TubePress will handle the submission. If you want the results to show up on another page, just set searchResultsUrl. Please note that most users shouldn't need to do this.

[tubepress output="searchInput" searchResultsUrl="http://mysite.com/videos.php"]

Now that you have a search input form, you'll need to invoke TubePress somewhere else to display the search results.

Search Results

Displaying search results is also easy. Add the following code wherever on the page you'd like the search results to show up:

[tubepress output="searchResults" searchProvider="vimeo"]

The searchProvider option can be set to either dailymotion, youtube, or vimeo, and this tells TubePress which video provider to search. TubePress will also display a placeholder gallery if the user isn't searching (e.g. on their first visit to the page), but you can make it invisible until it has search results by setting searchResultsOnly to true:

[tubepress output="searchResults" searchProvider="youtube" searchResultsOnly="true"]

With TubePress Pro, you can display search results asynchronously (i.e. without a full page load). It's also a bit easier to set up than standard searching because you only need to invoke TubePress once on the page. The only catch is you also have to identify a DOM element where you want the search results to show up:

[tubepress output="ajaxSearchInput" searchResultsDomId="#somediv" searchProvider="vimeo"] For the searchResultsDomId option value, just use any jQuery selector that uniquely identifies an existing DOM element on the page that can accept HTML.

Narrowing Down Search Results

By default, TubePress will search all videos on the provider for the user's search terms. If you'd like to narrow the results down to videos uploaded by a particular YouTube Channel/User, Dailymotion user, or Vimeo user, you can utilize the searchResultsRestrictedToUser option (also available via the TubePress settings page at WP Admin > Settings > TubePress > Which Videos? > Feed Options)

For instance, to restrict search results to YouTube videos uploaded by the YouTube channel comedycentral, you might use the following shortcode:

[tubepress output="searchResults" searchProvider="youtube" searchResultsOnly="true" searchResultsRestrictedToUser="comedycentral"]

Edit on GitHub