Welcome to Cutline Plus!

YouTube Videos In WordPress: How To Embed, Wrap Text, Set Autoplay, Resize, Align…and avoid iframe problems

December 10, 2010 · 32 comments

Coming YouTube embed code changes may dramatically affect how YouTube videos work in WordPress. Here’s what to know—and what to do. All directions below are for self-hosted WordPress blogs, i.e. not on WordPress.com, but at your own domain.

UPDATE: If you’d like to handle YouTube with a lightbox plugin, WP-PrettyPhoto is a good choice.

Embed and resize your YouTube video

First you need to find or upload a video to YouTube. Then go to the video’s page on YouTube and click the “Embed” button underneath it. You’ll copy the YouTube embed code and paste it directly into the HTML tab in WordPress. You can just copy the code as is, or first choose or type in a custom width or a height and the code is automatically updated for you. Then you copy it from YouTube and paste it into WordPress. I’ll add a video shortly showing how to do this. Here’s a screenshot for now:


Align and wrap text around your YouTube video

The easiest way is add some “wrapper” code to the YouTube code you’ve pasted into WordPress. Just before the YouTube code (in WordPress HTML tab),  type <div> and just after type </div>. To make the video align to the left, and the text wrap around it to the right, simply change the <div> to <div class=”alignleft”>. The other options are <div class=”alignright”> and <div class=”aligncenter”> … pretty self explanatory 🙂

Set your YouTube video to autoplay

Here’s YouTube’s explanation for what you need to change: http://www.google.com/support/youtube/bin/answer.py?hl=en&answer=56107

Create a Video Thumbnail image

When you create a WordPress post that is primarily a video, you’ll want an image of that video to appear wherever your post is listed—preferably with a “play” button image in the middle of it so people see that they will be taken to a video. Here’s a simple way anyone can do that:

Important: How YouTube iframe code changes will affect WordPress

UPDATE: YouTube HAS done this, and as predicted, still offers a way to use the old embed code (circled in red in screenshot below):

YouTube has stated implemented they will be changing the default embed code for general users to an iframe format. This will make it easier for embedded videos to work on Apple products that don’t allow flash. But: WordPress has problems with iframe code (this also affects, for example, embedding Google Maps iframe code).

What can you do?

First, realize your existing code will continue to work (whew!). Second, YouTube will likely continue to make the embed-style non-iframe code available—just not by default. So all you need when they make the changeover is choose the HTML embed code instead of the iframe code. No word on how complicated this may or may not become.

What’s the problem?

When you place iframe code in the HTML tab on WordPress, everything works fine until you switch to the visual tab, and then WordPress breaks the code. WordPress is aware of this, and has specifically decided NOT to adapt WordPress to use iframe code. The WordPress ticket for this was closed with the explanation that iframes are “deprecated html” that shouldn’t be used anymore, and so it isn’t a WordPress problem.

A secret to keeping iframes working in WordPress

However, iframes WILL work in WordPress, but you MUST remember this trick: If you should accidentally find yourself in the “Visual” editing tab for a post or page that you have placed iframe code in, do NOT save!! Leaving the page, you may get a popup that says something like “The changes you made will be lost if you navigate away from this page.” Yes—lose them! Don’t save the changes. The “changes” are simply WordPress BREAKING your iframe code.

Afterwards, since WordPress will often take you to the last tab you worked in, go to the edit page for a DIFFERENT post or page (not one with iframe code) and choose the HTML tab. Then go to the page or post with iframe code. It should open in the HTML tab. If you needed to make any edits to the text or something other than the iframe code on that page, you can ONLY make them from the HTML tab. If you EVER go to the Visual tab—even if you don’t make any changes—and then save, your iframe code will be broken.

What I do also is copy all the code from the HTML tab of anything that has iframe code in it, and just save it as a text file on my computer. That way if there is ever an “accident,” I can just paste from my text file into the HTML tab of whatever was broken to restore it.

Tweets that mention YouTube Videos In WordPress: How To Embed, Wrap Text, Set Autoplay, Resize, Align…and avoid iframe problems -- Topsy.com
December 11, 2010 at 5:34 am
Myemployment.com
August 28, 2012 at 10:56 am
1 Evy Hanson April 5, 2013 at 12:29 pm

What an easy solution to left align a video. Thanks, you helped me out!

Reply

2 Guo Pei March 22, 2013 at 2:32 pm

Thank you so much, it really helped me for my homepage video 🙂 ! Appreciate it !

Reply

3 Embed Kode Youtube July 11, 2012 at 8:49 am

I beloved up to you’ll obtain carried out proper here. The comic strip is attractive, your authored material stylish. nonetheless, you command get bought an impatience over that you wish be handing over the following. unwell surely come more previously again since exactly the same just about a lot continuously within case you shield this hike.

Reply

4 India Littler March 30, 2012 at 7:13 pm

Thank you so much! I’ve been working on this problem in my new WP blog to no avail for days, and this worked perfectly. I’m thrilled- thanks again!

Reply

5 ockalkulatory March 23, 2012 at 3:50 pm

Certainly along with you 100%. I’d personally question, for one thing, however i think this certainly not really worth talking about.

Reply

6 Cathryn Peters March 10, 2012 at 3:30 pm

Good advice to copy the code for your HTML tab if it has an iframe on it, and paste to a text editor. I should have been doing this all along with my WP blog, because I’ve frequently lost the Youtube video because I do switch back and forth a lot between the View and HTML tabs. Thanks for posting this and letting me know WHY the videos keep disappearing, too.

Reply

7 Dave Larson March 12, 2012 at 1:48 pm

Yeah, that can be a MAJOR frustration, for sure!

When I have similar situations, I tend towards the quit without saving, switch to another post and change to HTML view, and then go back to the other post where you must start in HTML to avoid losing things.

But if I have to work a lot with a particular post that needs HTML view, I ALWAYS save to a text editor as I go 🙂

Reply

8 Myriah Reed May 14, 2013 at 4:56 pm

Also a way to get over this copy and pasting you could install a plug in called TSL iframe unfilter, it will allow you to keep your iframe in visual mode.

Reply

9 Christopher Whalen December 6, 2011 at 3:00 pm

Thanks! It worked a treat!

Reply

10 charlotte July 24, 2011 at 12:51 am

How can I embed only the playbar(without the image) of a youtube video?

Reply

11 Dave Larson August 8, 2011 at 2:21 pm

For that, I would just take one of these images and make it a link to the video.

Reply

12 Lickitblondie June 10, 2011 at 1:57 pm

I can wrap text to the left with float left code but I want to also add another youtube video within the same text paragraph but wrap the text to the left insted of to the right in the first video basically I want to have two youtube video withi one paragraph one at the start and then one at the end but have them on diferent sides of the text…how Ive tried the div float left and right..it makes the second video really small

Reply

13 Dave Larson June 10, 2011 at 3:46 pm

Use the native WordPress CSS alignment classes in a wrapper div. If you aren’t sure what classes to use, just insert an image and use the dashboard controls to align it as needed, then check the html to see how WordPress aligned it. Copy the class=”aligncenter” (or whatever) part into the div you want to use to align something.

Reply

14 Cathryn Peters April 17, 2011 at 12:04 pm

Dave, I have a problem with my YouTube channel in that after the updates in April 2011, I can no longer find the embed code there at all. Everyone says to click on the Share button, which I have done, and then there’s supposed to be an Embed button there, but it’s NOT there on my screens and I’ve tried IE, Firefox and Chrome. All I have below the Share button is a Watch code and an Email button NOTHING else. What’s up with that? It happens on my YouTube channel and everyone elses also, cannot get embed code or drop-down anymore to choose video format, size, etc.

Reply

15 Dave Larson April 20, 2011 at 7:57 am

Is it the same whether you are logged into YouTube or not? A workaround might be open a second browser where you are logged out of YouTube, and copy the URL for the video you want to get the code from to the logged out browser and see if you get different options. Also try resetting your cache http://bit.ly/FixBrowser

Could you upload a screenshot of what you see to http://imgur.com/ ? I’d be willing to take a look and ask some other experts.

Reply

16 Cathryn Peters March 10, 2012 at 3:23 pm

Oh golly, Dave I followed your directions and cleared my cashe too, which is always something I forget to do, and viola it works now to see the embed code. I sure feel silly! Thanks a bunch!

Reply

17 Dave Larson March 12, 2012 at 1:46 pm

Glad it helped, Cathryn! It’s something that also solves a lot of problems over at Twitter.com 😉

Reply

18 Marneil Abante March 23, 2011 at 6:10 pm

regarding free wordpress blogs, is there a way to set the youtube videos on autoplay?

Reply

19 Dave Larson March 25, 2011 at 9:47 pm

Yes, I link to an explanation of that in the middle of the post. Basically, all you need to do to set the video to autoplay is add the following:
&autoplay=1

Reply

20 Nassorn March 4, 2011 at 12:07 am

I made a post at WordPress.com and put to embeded Youtube video try to push it to the right. It doesn’t work! 🙁

Reply

21 Dave Larson March 4, 2011 at 12:12 am

Sorry you’re having trouble…I point out at the very top that this is NOT for WordPress.com blogs, but for self-hosted WordPress blogs. Unfortunately, they are quite different from one another 🙁

Reply

22 Mike's Road Trip January 22, 2011 at 10:36 am

Excellent…thank you so much Dave! Cheers!

Reply

23 Mike's Road Trip January 20, 2011 at 7:16 pm

Is the old html code no longer available? Correct me if I’m wrong, but in your post you say that it will no longer be offered by “default,” but it’s still available…where is it? I can’t seem to find it and the iframe does not work in WordPress. And the “Trick” that you outline…not a good workaround in my opinion.

Anyhow, look forward to hearing back.

Cheers,
Mike

Reply

24 Dave Larson January 22, 2011 at 4:34 am

Thanks for the heads up, @MikesRoadTrip! I’ve updated the post with a screenshot of where YouTube allows you to use the old embed code and sent you a tweet about it 🙂 Agree that the “trick” is a poor choice when the old code is available—which it is.

Reply

25 Opally December 11, 2010 at 6:21 am

Best solution: Use a WordPress YouTube plugin like Vladimir’s Smart YouTube.

If you’ve already manually embedded YouTube code into your posts it is still an easier fix to change all that code to something simple like httpvh://www.youtube.com/watch?v=WSNfd-TltPM.

Reply

26 Dave Larson December 12, 2010 at 10:15 pm

Good point! WP-PrettyPhoto is also an excellent choice, handles images, other flash, galleries etc.

Reply

27 Profit2829 December 10, 2010 at 9:17 pm

You have posted help tips for blogs WordPress.org

What about blogs on WordPress.com – will we be affected at all?

Reply

28 Dave Larson December 13, 2010 at 3:39 am

I expect you might, as this is designed to make YouTube work differently, and the problem it causes affects both WordPress.com and self-hosted sites. However, WordPress is likely already planning some mitigating steps so you might never notice. Will be interesting to watch.

Reply

29 sam December 10, 2010 at 6:13 pm

Another solution is; Copy and paste the whole Youtube code and enter it directly into the HTML tab on your post. Its in the upper right hand corner of the post box. Save it. It works for me.

Reply

30 Dave Larson December 10, 2010 at 6:52 pm

Hmm. You’re simply repeating the directions I gave here. Was something not clear?

Reply

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Previous post:

Next post: