YouTube is easily the most used and visited video platform, so it’s easy to see the benefits of having a YouTube channel to grow your audience, reach potential customers and showcase your expertise. But what if you don’t want to use YouTube to grow a subscriber base? Perhaps you just want to use YouTube to host your videos so you can embed them on your website?
This is all possible too, with YouTube’s embed option when you go to share a video.
(Note: You must allow embedding when you upload the video to YouTube for this feature to be enabled.)
However, embedding YouTube videos in your website can pose a few issues…
Removing related videos at the end
These are great for YouTube to keep people engaged on their platform, but when the video is on your website, you probably don’t want people viewing a selection of random videos (potentially from competitors) after they’ve watched yours.
To remove related videos, edit the embed code YouTube provides and add ?rel=0 to the end of the video URL:
Making the embedded video responsive
Using YouTube’s standard embed code doesn’t automatically make your video size respond to the width of the screen viewing it and can lead to some odd layout issues on different devices. Once you’ve embedded your YouTube video, try resizing your browser window and see what happens to the video. If it looks odd, we need to make a few tweaks.
We’re going to edit some code now, so get your techie hat on!
First, we add a <div> around the embed code like so:
Then, we’ll create a new class called “videowrapper” in the stylesheet like so:
Hey pesto, your videos should now display in 16:9 format on any screen size!
Removing the “Watch on YouTube” button
You’ve worked hard to get people to your website, so why would you want them to watch your video on YouTube and leave your site? Annoyingly, this is now part of embedding YouTube videos. However, there are a couple of ways to remove this feature.
Option #1: Remove the video controls. By adding ?controls=0 to the end of your video URL in the embed code, this will remove the player controls and also the Watch on YouTube button.
Note: If you’re already using ?rel=0 or other parameters, you don’t need the ? at the beginning. Instead, separate each parameter with an ampersand (&), like so:
Also note: removing controls can be bad for usability. Although the viewer will still be able to pause and play the video by clicking on it, they’ll be no obvious way to do this and could lead to a bad user experience, so use with caution.
Option #2: Reduce the size of the embedded video. By default, YouTube will set the width of the iframe to 560 pixels and the height to 315. If we reduce this size below 514 pixels wide and 289 pixels high, the button disappears.
Note: If you’ve used our CSS code above to make your videos responsive, changing the width and height in the embed code won’t remove the Watch On YouTube button. You’ll need to add a max-width and max-height to your videowrapper class, like so:
Linking to a certain point in an embedded YouTube video
When you’re embedding YouTube videos on your website, you may not want to show the entire video (particularly if it’s long). Whilst YouTube will let you copy the URL of a video at a set time by right clicking on the video, changing this in an embedded video is a bit more of a manual job.
To change the start time of an embedded video, we can add another parameter to the end of the video URL in the embed code in the format t=MmSSs. For example:
This would set the video to start 1 minute and 35 seconds into the content. You can also skip the intro to a video by using ?start=30. This would trim 30 seconds off the beginning of the video.
There are lots of hacks to make your embedded YouTube videos work for you and keep people on your website for longer. Just remember to consider how they will impact the user experience. Happy visitors = better engagement and conversion rates 🤗.
Leave a Reply