Close

1 March, 2016

Quick Tip: How to keep people on your site

(while using YouTube videos)

Have you noticed when you embed a video, at the end you get a box of “related video” tiles? This is YouTube giving customer service of showing people what it thinks are related videos. But it gives a big distraction to visitors.

The fix is quick, easy and powerfully good at keeping people focused on your content, even if you’re using someone else’s videos.

related-video-tiles

Well that’s nice when you’re surfing YouTube, but not when people are reading and learning on your blog. You went through the effort of getting them to your blog, you don’t need YouTube to offer them another shiny object for them to follow and go away from your site!
cat meme

There’s a really simple change you can make to the embed code YouTube gives you that stops the tiles.

Here’s what the embed code looks like straight out of YouTube.
embed codeIn yellow, you’ll see the URL of the video. This is where we’re going to add just six characters.
revised codeSimply add the question mark, then rel=0. Remember to do this inside* the quote marks.
Now when readers reach the end of the video, they’ll see the start of the video, like this:
no-related-vid-tilesAnd now, they’re more likely to read anything you’ve put after the video and stick around on your blog.

Want more?

There are a few other changes we can make to the video display and function.  As with the related videos, these go at the end of the URL. To put multiple parameters together, simply add a & between them.

parameter comments set value to
loop cycle the video – when it finishes, it starts again. Use with caution 1
modestbranding reduces the amount of YouTube branding 1
start start the video at this time offset positive number in seconds
end end the video at this time offset positive number in seconds, from the start of the video

 
Here’s an example of using multiple parameters together. Using this code:

<iframe width="560" height="315" src="http://www.youtube.com/embed/aaaaaadaaaa?modestbranding=1&loop=1&rel=0&start=44&end=92" frameborder="0"></iframe>

This is the result:

If this seems a little daunting, there’s a handy tool here: http://www.classynemesis.com/projects/ytembed/ to help you create these modifications to the standard display, and a whole lot more than I’ve mentioned above.