Warning Warning!

If you add the embed code in the HTML editor, and then switch back into the Visual editor, sometimes your video embed code disappears. So stay in the HTML editor, hit Publish or Update to make it go live, and only edit that post or page in the HTML editor from then on (so make adding the video the last thing you do).

Hopefully the WordPress & YouTube guys figure out a way to make this work better in future, but that's what we need to do for now :)

Note NOTE: This video refers to older versions of WordPress or external websites. While the general principles demonstrated may remain the same, specific details may differ slightly from when this was recorded.

Summary

Insert Video from Youtube or Vimeo

Walkthrough

Insert Video from Youtube or Vimeo
  • Something that people frequently want to do is learn to link or embed a video on their website, often from Youtube or Vimeo
  • So, open a new tab and bring up Youtube, and search for a sample video
  • When you've found the one you want, go back to your dashboard and open the page in which you want the video
  • Click into either adding a new post, a new page, or Editing an old page; the process is the same
  • Give it a relevant title. In the text box, right some relevant text about the video, and for this example, highlight a word and hit bold
  • In the next line we wrote 'This is my link', go back to the Youtube page, and copy the address bar info
  • Highlight the text you want to link, and Click on the Link Icon, it's a little chain-link on the top row of icons
  • Paste in the link address in the popup box, in the Link Url line, and hit Insert
  • You should see the link text change colour, now click the blue Publish button
  • If you view what you just did on your site, you'll see that if you click the link it will bring you to the address specified in the link
How to Embed an Online Video [2:14min]
  • So if you wan to change that from a link to an Embedded video, delete the link in the Edit window
  • Go back to the Youtube page of the video you want to embed, scroll down under the video and click the Embed button
  • Down will drop a box with highlighted text, called the Video Embed Code
  • Copy the Video Embed Code, by right clicking and choosing Copy
  • Go back to your blog post or page in which we want to embed the video
  • Note that if you simply paste in the Embed Code into your text box, Update and view, you'll simply see the code and not the video
  • On the text box editor, at the top you'll see two tabs, the Visual which you're on, and the Html, click Html
  • Now in the Html window of the text editor, you can paste in the Video Html Code you copied from Youtube, click Update
  • Now when you view the live page, you can see the embedded video in place and playable from your site.
  • So that's how you can embed a Youtube video
  • On vimeo.com another video sharing site, you will notice the Embed button is right on the video itself
  • If you click on it, it brings up a popup window with the embed code for you to copy and paste as before

Leave a Reply

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