How To Embed Videos Into WordPress Without Plugins

I’ve tried numerous of plugins to display flash video on my blog from sites like YouTube.com, but in a lot of cases, the plugins didn’t play well with other plugins, wouldn’t display anything, or just plain didn’t work. Fed up with all the issues, I had an idea to use the custom fields feature to embed video to posts much like how I embed thumbnails and do featured images.

This method works great for most purposes, but does have one severe limitation, the flash video will always appear in the same place (e.g. before the content or after the content, etc.) and you won’t be able to embed the flash video anywhere inside the post (e.g. between the second and third paragraphs). It’s easy to fix the first issue, you code multiple custom fields and place the custom fields code in the various places you would like the video to appear, although I won’t go into that in this post. For the most part, this is going to be a simple tutorial on how to embed a flash video into a post.

  1. Since I want the video to appear both on the main page and in it’s own page, we’ll have to edit both the index.php and single.php. Let’s start with the index.php file first.
  2. Open your index.php file and decide where you would like the video to appear. Your template tags may not appear exactly in the same order as mine, but you should be able to find it. I opt for the video to appear before any content, so I’m going to add the following code:
    [source:php]<?php if (get_post_custom_values(‘video’)): foreach (get_post_custom_values(‘video’) as $video) {} ?>
    <object width=”425″ height=”355″><param name=”movie” value=”<?php echo get_post_meta($post->ID, “video”, true); ?>”></param><param name=”wmode” value=”transparent”></param><embed src=”<?php echo get_post_meta($post->ID, “video”, true); ?>” type=”application/x-shockwave-flash” wmode=”transparent” width=”425″ height=”355″></embed></object><br />
    <?php endif; ?>[/source]
    above
    [source:php]<?php the_content(); ?>[/source]
    I’m not going to get into a big discussion about custom fields works, but I will explain each chunk of code for clarity. The first part of the code:
    [source:php]<?php if (get_post_custom_values(‘video‘)): foreach (get_post_custom_values(‘video‘) as $video) {} ?>[/source]
    means if the post has a key value of video used, then display whatever appears next to the key in the value field. I use video as the key because it’s easy to remember, but you can use whatever value you like so long as you change the values in bold in the above code. If you embed other video types also, like WMV or QuickTime, you might want to use a key of flash-video. The second part of the code:
    [source:php]<object width=”425″ height=”355″><param name=”movie” value=”<?php echo get_post_meta($post->ID, “video”, true); ?>”></param><param name=”wmode” value=”transparent”></param><embed src=”<?php echo get_post_meta($post->ID, “video”, true); ?>” type=”application/x-shockwave-flash” wmode=”transparent” width=”425″ height=”355″></embed></object><br />[/source]
    is the semi-proper formatting for embedding a flash video into a website. The width and height you can set to whatever size you like, I didn’t want the videos too big on my site so I used 425 for width and 355 for height. Under value and embed source (embed scr), you will see:
    [source:php]<?php echo get_post_meta($post->ID, “video“, true); ?>[/source]
    This is the code that calls the contents of Value field in the custom fields of the specific post and displays it here. If you changed the key value from video to something like flash-video, make sure you have the video to flash-video in here also. The final line of code:
    [source:php]<?php endif; ?>[/source]
    just closes off our PHP if statement. If you did everything right, it should look something like:
    [source:php]<?php if (get_post_custom_values(‘video’)): foreach (get_post_custom_values(‘video’) as $video) {} ?>
    <object width=”425″ height=”355″><param name=”movie” value=”<?php echo get_post_meta($post->ID, “video”, true); ?>”></param><param name=”wmode” value=”transparent”></param><embed src=”<?php echo get_post_meta($post->ID, “video”, true); ?>” type=”application/x-shockwave-flash” wmode=”transparent” width=”425″ height=”355″></embed></object><br />
    <?php endif; ?>

    <?php the_content(); ?>[/source]

  3. Now open your single.php file. We’re going to add:
    [source:php]<?php if (get_post_custom_values(‘video’)): foreach (get_post_custom_values(‘video’) as $video) {} ?>
    <object width=”425″ height=”355″><param name=”movie” value=”<?php echo get_post_meta($post->ID, “video”, true); ?>”></param><param name=”wmode” value=”transparent”></param><embed src=”<?php echo get_post_meta($post->ID, “video”, true); ?>” type=”application/x-shockwave-flash” wmode=”transparent” width=”425″ height=”355″></embed></object><br />
    <?php endif; ?>[/source]
    above
    [source:php]<?php the_content(); ?>[/source]
    like we did in step 2.
  4. Upload index.php and single.php to your theme folder on your web server. Assuming you are using your theme and it’s activated, go to your main page and make sure everything loaded as it should. If you get any PHP errors, double check to make sure you didn’t miss <?php or a ; somewhere.
  5. Make a new post, title it whatever you like and you can write anything you want in the Post field. Go to YouTube or some other flash video site and select a video, for my example, I’ll use The Terminator trailer. We want to copy the embed code and extract the URL from it:
    [source:php]<object width=”425″ height=”344″>
    <param name=”movie” value=”http://www.youtube.com/v/TPG-tKLAJuE&hl=en&fs=1″></param>
    <param name=”allowFullScreen” value=”true”></param>
    <embed src=”http://www.youtube.com/v/TPG-tKLAJuE&hl=en&fs=1″ type=”application/x-shockwave-flash” allowfullscreen=”true” width=”425″ height=”344″></embed>
    </object>[/source]
    so the URL we wish to use is:

    http://www.youtube.com/v/TPG-tKLAJuE&hl=en&fs=1

    , copy that and paste it into the custom field Value. The first time you use the video key, you’ll have to type it in, but afterward, it will be in the key drop down. Click Add Custom Field after you have entered video for key and pasted the URL into the Value.

  6. Save the page and do a Preview this Post and you should see the video appear before the content. If nothing shows up, check the Page Source (on FireFox: View > Page Source) of the page and see what appears before the content. If you did everything correctly, you should see:

In case you’re wondering why we don’t just paste the embed code directly into the post field, WordPress (by default) strips out potential dangerous codes out of the post field. The three ways around it is: 1) with a plugin, 2) using the custom fields, or 3) hard coding it to the theme.

UPDATE (September 30, 2008): As of late I’ve been using Viper007Bond’s excellent Viper’s Video Quicktags plugin with excellent results and would recommend using that plugin over this method so that when you change themes, your videos won’t break.

10 thoughts on “How To Embed Videos Into WordPress Without Plugins”

  1. Originally Posted By hissihissithese code worked with ie7, but failed in firefox & safari. @@~

    What’s not working specifically? Is no video loading? Is flash installed in the Firefox and Safari browsers?

    I tested it on my site on a Mac and PC with both FireFox 2/3 and Safari and it works fine. Can you send me a screenshot or a link to the site that’s not working?

  2. Thank you so much, my theme was stopping videos from showing on the main page, after hours of trying (literally a whole day) I found your solution. It works perfect although if you are copying and pasting the code from your page dreamweaver does not recognize the quotation marks due to font(note to others re-write the quotations). Thanks again

    Kai

    1. Kai, I’m glad it worked! Yes, the stupid “smart quotes” thing used to give me problems all the time in the beginning.

  3. Hallo, thanks you for this “video embedding tutorial”, it helped me. I managed to add videos to my blog posts and pages fine, but had problem to add e.g. youtube videos onto my home page. Your code works for me now, I am still tuning CSS for the exact layout I will use. Thank you! I see you do photography too, as per your avatar.

    1. Anne, I’m glad the code worked out for you! What’s the problem with adding videos to the front page?

      Yes, I do photography also. You can see more at my photography site here.

      1. I could inset the code provided next to youtube videos into my blog post (or page) easily using the HTML field editing option. But I don’t have the post or page set as home page in WP settings so I had a thought to work around it and experimented with fitting it among the index php code lines in that file manually. At first it moved all my text under the video. Now I used one div with float:left style and it’s almost perfect. This page provides more php ideas for me, it’s Friday evening here, I am kind of into this lately. Ta.

        Nice b/w shots slides in the “What is love?” category but color as well. Take care…

        1. If you don’t have a post or page set as the homepage, then things should be fine as in step 2, you’re opening your index.php file and making the edits there. But yes, you’ll probably have to add DIVs and style it to make it sure it wraps correctly. Don’t forget to add display: block to that DIV so that the video is always on it’s own line.

          Let me know if you need further help!

          Thanks BTW!

  4. Hi, I was looking at the posting you have on how to embed video, particularly on the front page of a blog. I noticed too that at the end you recommended Viper, but didn’t see anything in there that shows how the videos through their plugin can be shown on the front page. Is this possible?

    Thank you!

    1. Melissa: yea, I’m a huge fan of Viper for many reasons including when you switch themes and change the video dimensions to display, with all Viper embedded videos, the change is automatically applied. If you do it manually, you have to change every post.

      How do you want video displayed on your front page? If you want it to appear in your sidebar, you have to download a WordPress plugin (or use the functions.php file) that let’s you put shortcodes in the text widget and then you can use the Viper shortcodes there.

Leave a Reply

Your email address will not be published. Required fields are marked *