Posting video in the blog post

There are many ways of posting video.

  1. Create a link to the video if it is at another site such as YouTube.
  2. Embed the video in you blog post from another site such as YouTube
  3. Upload a video file and link to it.
  4. Upload a video file and create a steam for viewing.

We will initially only do the first two at FoTM until we get a  handle on our storage requirements as the site grows. Check and see the John Mayer video I have posted in my blog.

To create a link:

  1. First go to the site such as YouTube and find the video you want.
  2. Highlight the url in the address bar of the browser and select 'copy' from the edit menu or type Ctrl-C to copy it to the browser clipboard.
  3. From the 'Create content' menu choose 'Blog entry' or 'Page' (if  you want the video to be in a separate page). Give it a title.
  4. In the rich text editor type in the text which you want to be the link to the video (eg. watch the video), highlight it by dragging the cursor over the text and click on the  'Insert/Edit link' button in the text editor. This is the one which looks like a link of a chain.You will get a pop up window. Paste the full url from the clipboard, such as "http://www.youtube.com/watch?v=8ukitbLI2C4" for the John Mayer video, in the 'Link URL' field by choosing 'Paste' from the edit menu or type Ctrl-V. In the 'Target' drop down menu choose whether you want the video to open up in the same window or a new window. Type in a title and press the 'Insert' button.
  5. Select 'Full HTML' in the Input format section below the editor.
  6. Set 'URL path setting' (if you are creating a separate page and want to link to it using an alias.)
  7. Choose your comment settings
  8. Preview your post and then Save if everything is ok.

To embed the video:

  1. Like above go to the site and find the video you want
  2. This time highlight all the text in the 'Embed' field. For example for YouTube it will look like <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/8ukitbLI2C4&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/8ukitbLI2C4&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object> for the John Mayer video
  3. Copy this text to the clipboard using the edit menu or Ctrl-C
  4. Now start you blog post or page as above but this time click on the 'disable rich-text' link at the bottom of the editor. The editor will disappear and you will see the tags <pre></pre>. Delete these tags!!
  5. Type tag <div class="content">.  Paste the embed code from the clipboard between these tags by typing Ctrl-V. Type closing tag </div>
  6. You can type in additional text before or after the video embed tags, but you have to type it all in HTML!  Type in <br /> before and after the embed code to separate the video from rest of the text. If type in a lot of text  you can also type <!--break--> where  you want the teaser/body break.
  7. Follow steps 5-6-7 from the Create a link section above
  8. Preview will show if it is working as you expect. Unfortunately when you preview, the rich text editor will reappear and you will have to repeat steps 4-5 all over again. But you can just paste the embed code as long as you haven't performed any other cut/paste operations in  your browser. The code will be still on the clip board of the browser.
  9. Finish by clicking Save button.
Powered by Drupal, an open source content management system