Embedding YouTube videos on your website – top tips!

Embedding YouTube Videos on Your Website

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.

Embed Video from YouTube - Get the code

(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:

Remove related videos from YouTube embed

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.

Weird cropping on smaller screens YouTube video Weird response to screen widths YouTube video

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:

Wrap YouTube embed code in a div

Then, we’ll create a new class called “videowrapper” in the stylesheet like so:

CSS for responsive YouTube embedded video

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.

Remove 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:

Remove Watch on YouTube and related videos

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.

Standard size YouTube embedded video
Standard 560×315 video
Watch on YouTube button removed
Resized to 514×289

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:

Max height and width YouTube embed

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.

YouTube URL at certain timeTo 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:

Start YouTube video part way throughThis 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  🤗.

Heather Robinson
Heather Robinson has been working in digital marketing since 2005. Graduating with a degree in marketing from the University of Leeds and an MSc in Digital Marketing from Manchester Met, Heather puts her strategic knowledge into practice, working with businesses of all sizes on their digital marketing strategies. She is also a published author and conference speaker and provides consultancy and training to marketing teams in the public and private sector.

Share with your network >>

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on tumblr
Share on whatsapp
Share on pocket

Struggling to generate leads for your business?

Join the Skittish Academy today and learn how to build a scalable lead generating system using our 5-step…

Lead Generation Blueprintâ„¢

More posts like this one...

SEO myths debunked

5 SEO myths debunked

The “smoke and mirrors” world of SEO has its fair share of conspiracy theories, folklore and misconceptions. In this article we look at just a

Read More »
Video marketing good for SEO?

Are Videos Really Good For SEO?

Many video marketing companies sell their services based on the promise that having a video on your website will get you higher up in Google’s search results. But is this actually true? Let’s look at the facts and what you need to be aware of with video marketing for your business.

Read More »

Video marketing

Ok, so technically, we don’t directly provide video marketing at Skittish. We do, however, know some great videographers who can help us out. We also promote video to our clients to help build their online presence and convert more traffic into sales. Video can be used in pretty much any industry, even the mundane ones!

Read More »

Leave a Reply

Your email address will not be published. Required fields are marked *