WordPress allows users to easily embed video links from YouTube or Vimeo directly onto a page.
But what happens if you are collecting a video link in a custom field and then trying to show the video on a page?
This can be done via the wp_oembed_get() function but that strips out any parameters such as autoplay or rel (related content).
Here’s how to take a video link from a WordPress custom field, display the video and pass parameters such as autoplay.
Collecting the Video Link
You can collect a video link in heaps of different ways using WordPress; on a page using a custom field, by extended user profiles or custom post types.
We’re going to use a simple page and a custom field called lc_video_link which contains a YouTube video link.
To get this field, we’ll use the get_post_meta() function.$video_link = get_post_meta( $post->ID, ‘lc_video_link’, true );
Now we have our link in a PHP variable $video_link.
Displaying the Video Link
To display the link as a video on our page we use the wp_oembed_get() function.$video_embed_code = wp_oembed_get( $video_link, array( ‘autoplay’ => 1, ‘rel’ => 0) );
If you refresh the page where you placed this code you’ll see your video rendered as an iframe object on the page.
However, it’s not autoplaying. Why?
The wp_oembed_get() function allows you to pass arguments to the iframe (only width and height work just now) but not the video inside the iframe.
Filters to the Rescue
How much do you like WordPress filters?
I’m sure you’ll be a big fan after this.
We’re going to write a filter that grabs and modifies the output that the wp_oembed_get() function generates, passing our arguments directly to the video.
Here’s the code to put in your functions.php file:
Line 2 – adds our custom function lc_oembed_result to the oembed_result/ filter.
Line 7 – makes a copy of the arguments array
Line 9 – gets rid of the last array argument which is always “discover/true”, using array_pop().
Now we have all of our passed arguments available.
Line 11 – uses the http_build_query function to take an associative array and badger it down into a string in the usual http parameter format.
In this example, $parameters will contain “autoplay=1&rel=0”.
Line 14 – this is where we modify (filter) the output of the wp_oembed_get function.
The $html variable holds the entire iframe code, including the video URL which has the parameters we want to add to.<iframe width=”500″ height=”281″ src=”http://www.youtube.com/embed/lp9aOb04e20?feature=oembed” frameborder=”0″ allowfullscreen></iframe>
We search for and replace the generated parameter ?feature=oembed[?codelet] with the same string plus an ampersand then our [codelet]$parameters variable building up the complete url.
You can of course run it all together as one string. I just showed the concatenation so that’s it’s easier to see what’s being added.
The result is this:<iframe width=”500″ height=”281″ src=”http://www.youtube.com/embed/lp9aOb04e20?feature=oembed&autoplay=1&rel=0″ frameborder=”0″ allowfullscreen></iframe>
Line 16 – returns the modified code back to the filter.
Using Other Video Services
This example is for YouTube but it will work well with other video services such as Vimeo (example here).
You can extend the code on your page, around the wp_oembed_get() function, to detect which service is being used and only pass in parameters used by that particular service.
This can be achieved simply by performing a string search in the $video_link variable.
Let us know what different services you’ve used this code with.