This is Part 4 of my Beyond the Words series exploring the various and sundry ways in which you can add multimedia such as images, videos, audios, and downloadables (PDFs) to your website to spice it up.
So far in the series, we’ve been largely focused on adding images and other graphics to our blog posts and pages, but video has officially swept the nation and so let’s look at some ways that you can easily incorporate video into your content.
When adding video, as in most things in life, there’s an easy way and a slightly-less-than-easy way.
Both ways involve using a video hosting service – YouTube or Vimeo – to host your videos. So the video itself is embedded in your blog post – people don’t have to leave your site to be able to view the video, but it’s actually being “hosted” on an external service which means the video file lives somewhere other than on your web host.
This has a lot of advantages, and for many people (especially those with smaller, lower traffic sites) it’s going to be the best way to go. Most web hosts these days are optimized to serve web pages to site visitors, not video.
Videos are typically pretty good sized files that take up a lot of space and a lot of bandwidth for playback, and typically, your shared host like Bluehost or A2 Hosting (my favorite shared host of late), just isn’t equipped to be able to play those videos without using a lot of resources, so your video either is very slow or has a lot of buffering – not a good experience for you or your site visitors.
Services like YouTube or Vimeo, on the other hand are uniquely suited for just this purpose. They are literally built to stream those videos fast and efficiently so it’s a better experience for you, your web host, and your site visitors. Everyone is happy.
The Easy Way to embed a video
WordPress, bless its heart, comes along in the past year or so and intentionally tries to make it super, super easy to embed videos from these services.
If you want to, literally all you have to do is paste the link to the video right into your blog post. (You can use either the URL in your browser address bar or the shortened link it gives you when you click the SHARE button – I’ve found both links to work just fine.) WordPress goes out and does all the hard work for you so that your video is auto-magically embedded for you.
The problem I have with this approach
Unfortunately, this method doesn’t give you any control over how the video ends up being displayed. Typically I prefer not to display things like the video title and other random icons and links that YouTube so helpfully adds to the videos by default. It looks messy.
And heaven forbid someone is watching the video on your site and at the end and gets shown the plethora of “related” videos because one…this can so easily send them down the rabbit hole and away from your site having completely forgotten why they were there in the first place.
And two…there may be some surprising and not entirely welcome or appropriate videos that pop up. Especially on a business site, this can feel pretty yucky. It’s rarely your own videos unless you have a very deep, homogeneous slate of videos on your channel that are all similarly tagged.
Point being, there’s no control using The Easy Way, so I recommend that you go…
The Still-Easy-But-Takes-a-Few-More-Steps Way
Here’s how you do that in YouTube (Vimeo is pretty similar):
- When you click the SHARE link in YouTube (or Vimeo), instead of just grabbing the link, you actually want to use the embed code. It will be something like
<iframe width="xx" src="xxxxx" ...
- In YouTube, if you click the SHOW MORE link below that, it gives you even more options to control and tweak what’s going to show up where when you embed the video on your site.
- Choose a custom size – I like to use the full width of my blog post column but use your best judgment here about how big you want it. Remember, the wider it is, the more vertical space it will take up on someone’s screen, too. Somewhere in the range of 500-700px wide is a good size.
- Make sure “Show suggested videos…” and “Show video title and player actions” are both UNCHECKED. (These two options are the “control” I keep talking about – turning off related videos and all the other extraneous video details.) I leave player controls and privacy-enhanced mode both checked.
- Once you’re done clicking, highlight the full IFRAME code snippet by either dragging your mouse over it or clicking in the box and Ctrl-A to select all and then and Ctrl-C to copy it.
- Back in your blog post editor, make sure you are on the TEXT editor screen and not the VISUAL editor. On a blank line, Ctrl-V to paste the snippet and Voila! you’re done. Easy-peasy.
A word to the wise
Don’t ever choose to auto-play your video on your website. It’s just not socially acceptable anymore (not that it ever really was in the first place, but back in the day it was kind of en vogue). You might try and rationalize it in your head and come up with a dozen reasons why you want to do it, but this just isn’t a decision you should be making for your site visitor. It’s bad form. Really, don’t do it.
If you’re really going to get heavily into doing video and want a more custom, mature system for doing that, there are applications and plugins you can purchase that let you avoid using YouTube and Vimeo, but it can get pretty complicated with installation, configuration, and then you still run into the same questions about hosting and bandwidth and playback speed. That’s a blog post for another day.
If you’re interested in watching a demo, I’ve recorded a little screencast (you’ll notice that it’s streaming from YouTube) that walks you through the steps for both YouTube and Vimeo here.
So go forth and create fun, interactive content! In the next post of the Beyond the Words series, we’ll explore at the auditory (as opposed to visual) side of a blog post and discover how easy it is to add MP3 files that people can play right from your website and why you might want to do that.
