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.

parametercommentsset value to
loopcycle the video – when it finishes, it starts again. Use with caution1
modestbrandingreduces the amount of YouTube branding1
startstart the video at this time offsetpositive number in seconds
endend the video at this time offsetpositive 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/QGJuMBdaqIw?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.