Tuesday, November 28, 2006

Including A Video In Your Post

Photos are an easy way to make your posts more interesting. Going one step further, we have moving photos, ie videos.

Just Link To The Video, Hosted Externally
Including a link to a video is as simple as including a link to a photo, hosted elsewhere.
>>The Perfect Plumber
&gt;&gt;<a href="http://video.google.com/videoplay?
docid=2638976382458360943&q=plumber">The Perfect Plumber</a>

>> Top

Or Embed The Video In The Post
But look at my post in PChuck's Network: Don't Do It Yourself - If You Don't Think About What You're Doing

Here we have a Shockwave Flash movie, Embedded in the web page.
<embed style="width: 400px; height: 326px;" id="VideoPlayback"
type="application/x-shockwave-flash"
src="http://video.google.com/googleplayer.swf?
docId=2638976382458360943&q=plumber">
</embed><br clear="left"><a
href="http://video.google.com/videoplay?
docid=2638976382458360943&q=plumber"
rel="nofollow">The Perfect Plumber</a>

>> Top

Embed The Video, and Allow For Tags Supported By All Browsers
For another example, look at my post in PChuck's Musings: Why I Prefer To Live In California

Here we have a Shockwave Flash movie, embedded in the web page, and enclosed as an Object. You should use the Object / Param tags, in addition to the Embed tag, because not all browsers recognise the Embed tag.
<span style="text-align: center; display: block;"><object height="350" width="425"><param name="movie" value="http://www.youtube.com/v/Q62dija6bsM"><embed src="http://www.youtube.com/v/Q62dija6bsM" type="application/x-shockwave-flash" allowscriptaccess="samedomain" height="350" width="425"></embed></param></object></span><span style="text-align:center;"> »<a href="http://www.youtube.com/watch?v=Q62dija6bsM" rel="nofollow">www.youtube.com/watch?v=Q62dija6bsM
</a></span>

>> Top

Get The Code Needed From The Video Host
Many video hosting sites expect that you will, eventually, be passing their displayed material along to your friends; that's the fun of using the Internet. So they will make it easy, and provide the code for you to embed their video in your web page. Look at the embedded code above. Following the embedded object itself, you'll see the link back to the website. There you can find the code that you need, for your video that you just uploaded, or for somebody else's video.

>> Top

Add Your Own Video To The Video Host
Adding your video to your blog is as simple as 1-2-3.
  1. Upload the video to YouTube.
  2. Find the "<Embed> ... </Embed>" code for the uploaded video, and copy it.
  3. Paste the copied code into your blog.

>> Top


Setup A Live Video Feed
If you're really adventurous, consider UStream.
  1. Provide a connection from your computer, to UStream.
  2. Find the "<Embed> ... </Embed>" code for the live connection, and copy it.
  3. Paste the copied code into your blog.

Now you can broadcast yourself live. Shades of The Truman Show.

>> Top

Be Aware Of The Possibilities
Now, the above sample code is from a blog with a Classic template, which uses liberal HTML. If you are adding code to a blog with a Designer or Layouts template, you'll want to read about about a critical detail - XHTML differences in New (Layouts Templates) blogs.

And, when you get your video code from YouTube, it will come out in one stream, with no gaps or line breaks. When code is published online, in blogs like this one, there will be extra line breaks inserted to make the code readable. Be sure to remove all gratuitous line breaks from your code, before publishing.

Also note that the above examples show content enabled in your posts, as HTML. You can, just as easily, create a new HTML / JavaScript page element, and if you like position it as a Welcome post at the top of the page.

>> Top

Add A Caption
Want to add a caption to the video, maybe some text beside it, like a picture with a caption?


This is one example of why I prefer to live in California.




»www.youtube.com/watch?v=Q62dija6bsM



<span style="float:left; text-align:center; display: block;"><object height="280" width="340"><param name="movie" value="http://www.youtube.com/v/Q62dija6bsM"><embed src="http://www.youtube.com/v/Q62dija6bsM" type="application/x-shockwave-flash" allowscriptaccess="samedomain" height="280" width="340"></embed></param></object></span>
This is one example of why I prefer to live in California.
<br clear=left />
<span style="text-align:center;">
»<a href="http://www.youtube.com/watch?v=Q62dija6bsM" rel="nofollow">www.youtube.com/watch?v=Q62dija6bsM
</a></span>

>> Top

Make Sure To Size It Properly
When you position your video, whether in a post or the sidebar, you want to make sure that there's room for it to fit. If the video is too wide for the available horizontal space, you could end up with another post / sidebar alignment problem. Let's say that we just don't have 340px of width available, so let's reduce the width by 25%. We likewise reduce the height by 25%, to keep the aspect ratio the same. Instead of 340 x 280, let's make it 255 x 210.


This is one example of why I prefer to live in California.



»www.youtube.com/watch?v=Q62dija6bsM


<span style="float:left; text-align:left; display: block;"><object height="210" width="255"><param name="movie" value="http://www.youtube.com/v/Q62dija6bsM"><embed src="http://www.youtube.com/v/Q62dija6bsM" type="application/x-shockwave-flash" allowscriptaccess="samedomain" height="210" width="255"></embed></param></object></span>
This is one example of why I prefer to live in California.
<br clear=left />
<span style="text-align:left;">
»<a href="http://www.youtube.com/watch?v=Q62dija6bsM" rel="nofollow">www.youtube.com/watch?v=Q62dija6bsM
</a></span>

>> Top

Or Add A Blogger Video Bar
Another way to include a video (or more than one videos) is to add a Video Bar gadget. This is a very simple process.
  • Add, and position, the Video Bar. You can put it in the sidebar (if you have room), or in the blog post area.
  • Specify a Search Expression to allow the page element to select the video(s) that you're interested in.
Note that specifying a search expression will be simpler if you're interested in displaying video(s) with unique tags (if you're picky), or displaying videos that Google wants you to display (if you're not picky). If you're uploading your own videos, you'll want to add unique tags to the videos, so you can setup your Video Bar to select your videos, and not some others with a similar search expression.

>> Top

13 comments:

Fluxedup said...

Hi there and hello

I was told that you are the Wizard of getting music on a post in Blogger.

my blog is
http://fluxingup.blogspot.com/

there is a post there that describes as best I know what is going on. I clearly need help.

I used the embed tag but somthing is not working. I dont know if the link is goofed or the file at the link is goofed of my code is goofed.
Ultimately I wanted it to not have the Q for quicktime there just words in the Hyperlink style to click on and hear the clip and not looped.

any ideas?

Movimiento Humanista said...

Thanks for helping!

Fátima said...

I've a Google/YouTube video bar question that seems not to have an answer: Am stuck with their original selection or they change the four videos every now and then? I'm new at this and want to know if I keep the video bar.

Chuck said...

Fátima,

From what I see, if you include a Video Bar in your blog, you can select the subject of the content. If you want a video that has generic tags and it's in a popular category, you may or may not have the video of your choice on your blog.

If you want to choose, with reliablity, a single video, you're going to have to roll your own code. If you use a Video Bar, you get what they want to give you.

Fátima said...

Boy Chuck, that was fast! I don't mind their choosing the videos, I just don't want the very same four videos for all eternity (I'm being hyperbolic here). I want to know if they change the selection once in a while. It'll not be such a cool feature I they don't change the videos once in a while for the sake of variety.

garam masala said...

Hi!!I read that you are an authority, so seeking your help!please can you help me.I am struggling for last 15 days to put the music without the 3rd party host icon being visible, and now finally when I have achieved that, there is no music coming!!can you please guide me in easy steps??I would really be thankful.

tirz said...

Hello,

I would like to have my favourite videos in the video sidebar of my blog. I have my own channel and playlist of favourite videos on youtube, but I cannot succeed to let them show in the video bar. Any help would be great!

Chuck said...

Tirz,

You're not including a lot of detail here. Do you have any discussion in GBH: Something Is Broken? That's where you need to start.

John Sullivan said...

Chuck,
I'm attempting to load an audio file (mp3) to one of my posts. I'm using the edit mode and attempting to add it with the "add video" icon. The file is within the spacce requirements and attempts to load prior to dumping just when it appears it will take. What am I doing wrong?

Chuck said...

John,

Probably, trying to upload an audio file using a wizard for video files. Most videos are served as streaming content.

i'am.altaModa said...

soooo helpful...thank you!

momof2 said...

This sooo helped - thanks!

Pundit said...

That was really helpful. Thank you!