How to Embed Video in WordPress 3.9

Embed Video in WordPressOne of the coolest new features of WordPress 3.9 is the ability to automatically embed responsive HTML5 video directly into the WordPress editor. It’s really easy to do and it looks amazing. You can even embed a “chromeless” YouTube or Vimeo video that will integrate perfectly with your theme.

It’s been pretty easy to embed video in WordPress for quite a while, but this latest update gives it a nice polish thanks to the use of the latest version of MediaElement.js.

If all you need to do is embed a video directly in the WordPress editor, it’s ridiculously easy. All you have to do is drop a link directly to the YouTube or Vimeo video you want to embed like so:

https://www.youtube.com/watch?v=NhheiPTdZCw

This is really simple, and pretty neat… but it’s still using the old iframe embed method. The player doesn’t look all that snazzy and you don’t have much control over the way the video displays. You’ll also need to use something like FitVids to make sure the video looks good on all devices.

The good news is now that WordPress 3.9 is out, you don’t have to worry about this anymore. If you want to embed responsive video using HTML5 and JavaScript, all you have to do is use the Video embed shortcode like so:

[video src="https://www.youtube.com/watch?v=NhheiPTdZCw"]

Woohoo! No more iframe Video Embed! Just Sweet, Sweet HTML5 and JavaScript

Now you can style your player to look any way you like. With just some quick CSS changes, you can modify the entire player’s look and feel. The video embed shortcode also has a bunch of other options you can set. You can view a full list here, but most of the time you’ll probably just need to use the basic one.

One thing I did notice is that for some reason the FitVids plugin mentioned above seems to conflict with the player. If you have trouble getting the video to render correctly, make sure you’re not using a super broad selector in the plugin’s options or just disable the plugin entirely.

What if you Want to Dynamically Embed Video in WordPress Using a Template?

So… being able to add the video directly in the editor is cool, but what if you’re a developer? What if you want to make it possible to embed videos using a WordPress template? Good news: it’s still really easy! You can use all the same options as the shortcode above in a template by just calling the handy wp_video_shortcode function. Here’s a quick example of how you could wrap it in a function and embed a video using Advanced Custom Fields:

<?php
/**
* Displays an embeded YouTube or Vimeo video if one exists.
*
* @uses Advanced Custom Fields
* @author Robert Neu
* @link http://wpbacon.com/tutorials/embed-video-wordpress-3-9/
*/
function prefix_the_video() {
// Do nothing if we have no video to embed.
if ( ! class_exists( 'acf' ) || ! get_field( 'video_embed' ) ) {
return;
}
$attr = array(
'src' => esc_url( get_field( 'video_embed' ) ),
'width' => 960,
);
echo wp_video_shortcode( $attr );
}

In order to get this working, you’ll need to create a text field in ACF and name it “video_embed”. Once you’ve got that set up, you can drop a link to the video into the ACF metabox anywhere you’d like to display a video.

The nice thing about this method is you can just reuse the function throughout your theme. Plus, if you use the Genesis framework or any theme that uses a hook and filter system you can add the video to an action. The possibilities are pretty much endless. Here’s how you could use the code in a template or by adding it to an action hook in Genesis.

<?php
//Display the video.
prefix_the_video();
// Hook the video after the entry in Genesis.
add_action( 'genesis_after_entry', 'prefix_the_video' );

So how will you use this new, more polished method to embed video in WordPress? Do you think adding the shortcode is worth the extra slick HTML5 embed or are you going to keep using the iframe embeds? Let me know in the comments! Also let me know if you have any trouble getting this working and I’ll do my best to help out. 🙂

Photo Credit: Thomas Leuthard

21 Comments

  1. Ryan Hellyer

    This is awesome. I didn’t even know this was possible, let alone baked into WordPress core. Thanks for pointing it out.

    1. Robert Neu

      No problem! It is pretty awesome. I’m noticing an issue with it on mobile, but I think it’s something related to Genesis. Once I sort out whatever is going on with it I’ll update the post.

  2. GenesisThemesCA

    There’s so much good stuff in 3.9 I hadn’t yet seen this. Thanks, Rob!

    Having this baked right in is definitely good news. It’s also integrated with the familiar WP media manager so users can just “add media” and drop in their webm files very easily. I did find that the shortcode for webm requires an awkward “closing tag” leaving something like this: [video src="path/awesome.webm"][/video]

    Some people might find the non-default look for YouTube content to be unusual, but it means you can add more of your own branding.

    1. Robert Neu

      Really? Is it something specific to just the .webm format? I haven’t run across that yet. I agree that there’s a ton of potential to integrate branding and other unique elements into the video player. I think with some tweaking you could really increase the number of video views you get using this method.

  3. Guest

    I do prefer the look of the new HTML5 player when it’s not playing, but annoyingly while playing there is a YouTube watermark in the bottom right-hand corner which is not there when using the old player.

  4. victoriawagman

    If you find any plugin or any solution of any kind, where I can also add a width 100% to the video that’d be nice! I can’t get this to work with any of the plugins or code I’ve found on responsive video, but I don’t want to downgrade my wp-install of course…

    1. Robert Neu

      I haven’t found a good solution for 100% width embeds using this method yet. The best I could find to deal with this issue was to set the video embed width in the shortcode to the same as the widest instance of your theme’s content width.

  5. tomvondeck

    Have you figured out the mobile problems yet? I can’t auto-embed with just a URL in 3.9. It won’t let me. Your method, with the src, doesn’t seem to display the video properly on mobile. In fact, all my embedded videos disappeared with the 3.9 update so I had to start over. Probably because you have A-holes not bothering to test the major update before rolling it out. Nice people test the software that they are developing, especially if millions of websites are at stake. Malicious people don’t. Another thing I’m wondering is how to keep the thumbs up and share buttons in embeds. Also, what is the best way to embed videos that will survive future WP updates now that I know that the developers are either ice cold or incompetent? Thanks.

    1. Robert Neu

      I did sort of figure out what the issue is. It’s a bug in the way WordPress core implemented the YouTube embed. I’ve reported it to some of the core developers and I expect it will probably be fixed soon.

      This does seem to be a fairly major bug and I’m not entirely sure how it slipped through… but it does happen, especially when a new feature is introduced. I did kind of figure out a really lame way to fix it by editing WP core, but that’s a really bad idea and it also leaves some issues with the way the videos are formatted on mobile. Hopefully they get it patched up soon! 🙁

      1. tomvondeck

        Yeah, this should have been a Beta version with voluntary guinea pigs. I noticed that some mobile simulators show the video properly and some don’t. As for auto-embed, I don’t know what’s preventing that. The look of the html 5 embed is nice, but it could use some like buttons. As for size on auto-embed, it would be nice to just auto-embed and then add CSS to make it a nice size like in the html 5 embed.

  6. chand3g

    Hi ozzy! I found this blog when I was searching for chromeless youtube wordpress embedding. It’s really great shortcode of wordpress 3.9. You have embedd the code as you written above and showed what is the result, but one thing is not happening with me, it is not responsive. I tried to do that but couldn’t. When I saw again your player is responsive whereas you have done the same thing which I do? then what thing did you extra. Let me know, If you can share. Really, How you did this job above?

      1. chand3g

        Hi Ozzy,

        I am using current version of wordpress 3.9.1. All the things ( like chromeless player embedding) are working perfectly but only that player is not responsive. I am asking about your chromeless player embedding that is responsive also. How it is responsive only on your site. Sure, you do some extra things for that, what I want to know.

        1. Ozzy Rodriguez

          i don’t do anything extra to make it responsive, sir. are you adding the closing shortcode after? [/video]

          1. chand3g

            Thanks Ozzy,

            You have done your job whatever you can do with me to warm support. Yes, I closed the shortcode too. You do not paste as shortcode, there is something other action what you have taken.

            No problem, I will try more to resolve this issue. And when it is working on your site then it is possible thing. I am new guy and I will have to struggle to get some levels of quality work.

            Once again, Thanks a lot.

          2. Ozzy Rodriguez

            all that’s in the post to display the video and have it be responsive is [video src="http://www.youtube.com/watch?v=NhheiPTdZCw" width="960"][/video] on a new line…

            sorry i couldn’t be of more help!

  7. jeremyw

    Thanks, on my install with WP 4 and ACF I had to change the code from “get_field” to “the_field” to get a youtube link to display.

    esc_url(the_field(‘filmtrailer’)),
    ‘width’ => 960
    ); ?>

    ‘postermed’)); ?>

    1. Ozzy Rodriguez

      right. the_field() echos the value of the metabox and get_field() is used to store it in a variable.

      in your case, using the_field() is definitely the way to go!

Comments are closed.