The Insert Video feature of the Rich Text editor allows you to easily embed videos within your posts and pages from video hosting services, like YouTube, Vimeo, and other websites.
Additionally, you can upload your own videos directly to your TypePad account to be embedded in your posts.
The default width of some videos may be wider than the main content column on your blog. You can use Custom CSS to increase the width of your main content column to allow for wider videos. Or, you do have the option to customize the width of most videos to make the video fit within your blog's design.
To customize a Vimeo video, click the Embed option. Under the video preview, select the Customize embed options. If you have a 400px width for the main content column, enter 370px as the width for the video to allow for the default padding. You can also increase the default width if you have a wider column. The height will automatically adjust to be proportional to the height.
After customizing the video embed options, copy the code from the Get the embed code. In TypePad, click the Insert Video
option and paste the copied code into the Embed field. Finally, click Insert Video and publish your post.
YouTube offers a similar option to customize the width of your video. From the YouTube video page, click the Share and then Embed. The preferred width can be entered in the Custom box. Then you will copy the code to past in the Insert Video embed field in TypePad.
With YouTube if you don't want to customize the video, you can copy the YouTube video URL and add it to the URL field in the Insert Video pop-up. Please note the shortened youtu.be URL does not work with the Insert Video > URL option. You'll need to grab the full URL (e.g. http://www.youtube.com/watch?v=GlWdZhYR3Fw) for the video.
You can use the same Insert Video option to embed videos from other sites, like CNN and Twitvid, as well in your blog. More information on inserting videos is available in the Knowledge Base.
You can also embed videos uploaded directly from your computer into your posts without the need to go through a video hosting site. Instead of using the Insert Video option, you'll first click Insert File
to upload the video to your TypePad account. A link to download the video will be added to the post with code similar to:
<a href="http://example.typepad.com/blog/files/video.mov">Download video.mov</a>
The above code needs to be altered to display the video within your post instead of a download link. Click to the HTML tab to view the code for the post, and edit the download link to include the embed tags.
<embed src="http://example.typepad.com/blog/files/video.mov" height="xxx" width="xxx" autostart="0"></embed>
Replace xxx for both the height and width elements to set the size of your video. To preview how the video will appear on your blog, click the Preview button. We do not recommend switching back to the Rich Text after editing the video code as the code can be altered.
See the Knowledge Base article on uploading videos for more information.
What video hosting sites do you recommend? Do you have any tips for highlighting videos on your blog? Let us know in the comments!