featured image

Techniques for using video on your WordPress site

Jason Tucker

Jason Tucker

— 2 min read

In this post I plan to help you understand what oEmbed is and why it’s so awesome, how to make your embedded videos from YouTube or Vimeo be 100% width with the correct aspect ratio for the height, and help you set a featured image for your post from your embedded video’s thumbnail saving you time. Let’s get stated.

What is oEmbed

oEmbed is simply a way for WordPress authors to include audio, video and other media in their blog posts without using a standard embed code to make it happen. An author just needs to include the url of the media to be displayed and WordPress does the rest. For example if you were to put a YouTube url on it’s own line (as normal text, not a link) in a blog post and the video would be displayed, as shown below.


http://www.youtube.com/watch?v=TASykB63qu4

Would display a embedded video like this:

If you don’t want to have the video on it’s own line or you like using shortcodes you can do the same thing using this notation:


[ embed width="123" height="456" ] 
http://www.youtube.com/watch?v=TASykB63qu4[ /embed ]

This also allows you to specify the max height and max width of the video but we’ll cover this a bit later by using a plugin.

oEmbed lets you work smarter not harder

WordPress makes it easy to embed videos from many of the major video providers using oEmbed. Here is the sanctioned list of video services that you can embed using oEmbed:

[one-third-first]blip.tv
DailyMotion
Flickr
FunnyOrDie.com
Hulu[/one-third-first][one-third]Instagram
Qik
Photobucket
Revision3[/one-third][one-third]Viddler
Vimeo
YouTube
WordPress.tv[/one-third]

 

Making my oEmbed videos responsive

A  while back I wrote about Responsive WordPress websites and oEmbed video and I still use the plugin I mentioned Fluid Video Embeds when working with YouTube and Vimeo video embeds. What this plugin does is makes your oEmbed YouTube and Vimeo videos full width (100%) while maintaining their original aspect ratio. It’s a bit of magic wrapped up in a free plugin that is work looking into. It’s pretty plug and play and works out of the box.

I want to use my embedded YouTube or Vimeo video thumbnail as the featured image.

I’ve been using Video Thumbnails plugin for a while with great success. I use this plugin on WPwatercooler to pull the thumbnails from YouTube and saves me a few steps. This plugin adds a metabox to the edit post screen and will scan the post for a video url and then retrieve the thumbnail from the video. It has 4 simple settings you can enable or disabling depending on what you wanting to do:

  • Save Thumbnails to Media Library
    This saves the thumbnail to the media library instead of referencing a file hosted on YouTube or Vimeo.
  • Automatically Set Featured Image
    Sutomatically sets the thumbnail to be the posts featured image which is what we were wanting to do in the first place here.
  • Post Types post
    specify if you want this to work on Posts, Pages or any custom post types you use.
  • Custom Field (optional)
    If you use a custom field to store the filename of your featured image you can specify that field name in the 4th option and it will take care of that for you.

Let me know if you use any of these plugins and techniques to make your life easier.

Read more