Well ok, these aren’t really ‘hacks’ as such – just parameters that you can control when you embed a Youtube video. Using these parameters gives you a lot of control over what you embed, to the degree that there is little if anything to be gained out of hosting your own video for landing pages or whatever.
So, you’ve built a super-alluring responsive landing page and you want to use Youtube video embedded in it. Your super sales video is primed, ready and uploaded, now you just need to embed it…
But you don’t want your expensive visitors watching competitors video’s after yours has played, or getting distracted by video titles or other BS. Oh, and you don’t want anyone to go fast forwarding through your amazingly persuasive sales video. And you want it to autoplay when the page loads as well? Don’t want to show the Youtube branding on the video? Surely there’s no way you can do all that with a simple embedded video from Youtube right?
Wrong. You can do all the above (and more, actually but the above are probably the most relevant hacks for internet marketers). Let’s get started. Here’s a ‘virgin’ Youtube embed snippet to start with:
<iframe width="420" height="315" src="//www.youtube.com/embed/W8_Kfjo3VjU?rel=1" frameborder="0" allowfullscreen></iframe>
First up we want to stop related (competitor/cat) video’s showing up after yours has played. Easy, we do this using the ‘rel=’ parameter. In this case, we want related video off, so we will use ‘rel=0’.
Second, and this one’s pretty good, we want to turn off the video controls. No fast forwarding, no progress bar, no fiddling around with the video while it does its evil salesy work! For this, we use the ‘controls=’ parameter. In this case, ‘controls=0’.
Third, we want to make sure people see the video so we’ll make it autoplay when the page loads. This one is ‘autoplay=’ – in this case, we want it on so ‘autoplay=1’.
Fourth, we want to get rid of the major bits of Youtube branding on the video, at least as much as possible. So we use the ‘modestbranding=’ parameter. Again we want it turned on so we use ‘modestbranding=1’. You’ll still see a tiny logo when you mouse over the video, but otherwise there’s nothing much. Youtube branding is not going to stop someone buying something anyway.
Fifth, we can turn off the title and uploader stuff showing before the video plays using the ‘showinfo=0’ parameter!
Ok so now we’ve got our four customisation hacks, let’s put them to work in our Youtube iframe embed snippet. Here’s the first snippet above, with the custom parameters now in it:
<iframe width="420" height="315" src="//www.youtube.com/embed/W8_Kfjo3VjU?rel=0&controls=0&modestbranding=1&showinfo=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
Have a look at a demo responsive landing page with the embedded video with all the customisations above implemented. Note for the sake of sanity I’ve left autoplay turned off in this example! 😉
Don’t forget to make your video responsive via css to avoid layout issues on mobile devices. If you need the css, or a working example, download the free responsive landing page template from this blog.
Want to do even more clever stuff with your Youtube embed? Well you can do stuff like this using the same kind of paramters very easily – you can control the quality of the video, start the video at a certain point in its runtime, loop the video, play only a certain portion of a video…there’s lots of easy tricks! Check out this full list of available parameters from Google Developers here.