Embed Video from YouTube or Vimeo

Posted on by

It's a good idea to upload your videos to either YouTube or Vimeo before you embed them in a Post. If you have trouble, follow the steps below:

YouTube

  1. Upload your video to YouTube.
  2. Under the video click on the button that says Share.
  3. You'll see a shortcode and to the right a button that says Embed. Click on Embed.
  4. At the bottom of the Embed Options, you will see various sizes. Click on Custom and put 575 in the Width box (the Height box should automatically input a number).
  5. Look in the text box that has a long code that starts with "<ifram width=" and ends with "</iframe>". Select and copy the entire code (Comand C for Copy).
  6. Go to your Post on the website. Type up a description of your video, or whatever you want the post to say.
  7. When you're ready to insert the video, look at the tabs in the upper right hand corner of the edit box. One says Visual and one that says HTML. Click on HTML.
  8. Go to the bottom of the text and Paste-in the Code that you copied from YouTube or Vimeo (Command V for Paste).
  9. Click Publish. You're done.

Vimeo

  1. Upload your video to Vimeo.
  2. To the right hand side of the video click on the Share icon.
  3. A panel will pop up with some options. On the right hand side of the panel near the bottom, click on Customize embed options.
  4. Under Size put 575 in the first box (this value is for the Width), the other box should fill automatically.
  5. You can choose the color for the video title. Our highlight color for the website is #7a2f32, so you might want to use that.
  6. Under Other deselect any of the options.
  7. On the top right hand side of the panel is a text box that has a long code that starts with "<iframe src=" and ends with "</iframe>". Select and copy the entire code (Comand C for Copy).
  8. Go to your Post on the website. Type up a description of your video, or whatever you want the post to say.
  9. When you're ready to insert the video, look at the tabs in the upper right hand corner of the edit box. One says Visual and one that says HTML. Click on HTML.
  10. Go to the bottom of the text and Paste-in the Code that you copied from YouTube or Vimeo (Command V for Paste).
  11. Click Publish. You're done.
A few notes:
You can use the shortcode from Youtube that you first see when you click Embed; however, this code doesn't give you any control over the size of the video and sometimes parts of the video (often the top or bottom) get cut-off when you embed this way. It's best to choose the size of your video before embedding it.
When editing your post in the Visual tab, you'll only see a big box as a placeholder for the video. Don't worry, the video will show up when you view the post on the website.
Finally, the width specifications listed in this post are for the 2011 theme. You might have to adjust the pixel width for your website.