What Is A YouTube Video Embed Anyway?
If you upload a video file to your own website hosting, the large video file will eat up your storage and when the video is played by visitors it will use some serious bandwidth. If you get a lot of visitors and or upload a lot of videos, this can run you up against your account limits with your web host.
Also, your web host may not be optimized for playing videos so they may play slow or the default player on your website platform (WordPress, etc.) may not play nice with all browsers and devices.
Embedding a YouTube video solves these problems. YouTube knows a thing or two about video hosting so utilizing their technology is a smart move on your part.
You can use the code provided by YouTube to embed any video on a site. The video will display on your website just like the example videos below, but it will be playing off the YouTube servers and in the YouTube standard player.
Some benefits of embedding a YouTube video are:
- Your visitors get to watch a video…obviously
- Since the video plays from YouTube servers, it won’t take up your storage or bandwidth
- The data transfer won’t take up your hosting account bandwidth
- The YouTube player is optimized for any browser and device so you can be confident the video will play reliably
How To Embed YouTube Videos On Your Website
So how do you actually do this? It’s pretty easy, just go to any YouTube video YouTube.com and click the Share button. You’ll see some options for embedding the video and an HTML code that can be pasted into your site. Pasting in that code will display the video on your site. Voila!
Step 1 – Click Share and Embed
Step 2 – Get the code & paste on your site!
What if the video is not on YouTube?
If your video is not yet on YouTube, that’s a problem – but not a big problem!
You can upload a video to YouTube for free. Follow the instructions in my video above to upload your video first and then follow the instructions above to get the embed code.
A Couple More YouTube Embed Tips…
1. Embedding a YouTube Video in WordPress is even simpler
One other tip – if you’re using a WordPress site, you don’t even need the YouTube code. You can simply paste in a YouTube video link like “https://www.youtube.com/watch?v=vGHrJDmepI0” to WordPress and the text editor in WordPress will automatically embed the video. WordPress for the win – YES!
2. Make Your YouTube Embedded Videos Sleek and Clean
YouTube is pretty solid when it comes to playing video. The player itself is functional and people know it like the back of their smart phone, but the player doesn’t always present the clean look you’re looking for on your site. Check out the two videos below. The one on the left uses the standard YouTube embed code described above and the video on the right (2nd video) has some controls and titles removed. The result is a much cleaner look. To create this look, just use my code below but change the video ID in bold.
UPDATE: As you can see below, the videos are basically the same. Youtube has changed some of the embed parameters so that the “showinfo” parameter now does nothing. The result is the channel avatar, video title, watch later, and share buttons will all show at the top of the video. A nice clean video embed from Youtube seems to be a thing of the past. The 3rd embed below is part of my WordPress theme and does give a nicer look before the video is played.
<iframe src="https://www.youtube.com/embed/vGHrJDmepI0?rel=0;controls=0;showinfo=0;theme=light"
allowfullscreen="" width="420" height="235" frameborder="0">
YouTube Branding Issues – Changing The Rules
As I mentioned above, it has gotten harder to embed a perfectly clean YouTube video onto your website. Recently, YouTube changed many of their rules regarding embedding. Now their branding is added to any video hosted from their platform and auto-generated related video suggestions pop-up anytime a video is paused or finished playing.
This might not be a huge issue for you, but I do have some clients that want to add completely clean videos to their website. Luckily, I have a few workaround options to accomplish this.
Standard YouTube Embed – Forced Branding
You’ll notice when you drop in the normal YouTube embed code that you don’t have total control of video’s appearance. The video has the standard controls and branding that disappear when you take your cursor off the video. However, when you scroll over it, you once again get the channel name, buttons, and YouTube branding like my examples above.
Even more distracting, if you pause the video, related video suggestions pop-up along the bottom of the screen, and those same videos reappear when your video ends. Personally, I think this is a bad look.
Clean Embed With or Without Controls
By making some manual changes to the embed code, I’m able to turn off the related video function. With this code change you still have the standard play controls but will keep those related videos from cluttering up your page. Your channel name and YouTube branding will still appear anytime you pause or scroll over the video, however.
A few more tweaks to the code will remove all the player control buttons, but even with this you still have the YouTube branding across your video.
Ultimately through YouTube, you’re only ever going to have limited control. So, while it is a free option, it comes at the cost of promoting the YouTube platform through their icons and branding. This might be fine, especially if you’re trying to get visitors to subscribe to your channel, but if you don’t want to promote your channel or YouTube itself, you’ll want another option.
There’s also no telling what Youtube might do in the future!
Vimeo Plus
The best solution I’ve found, and the one that I personally use, is purchasing a Vimeo Plus account. I use the cheapest option which runs $7/month with a max upload cap of 250GB a year.
With this account I can create perfectly clean videos like the example below with absolutely no outside branding. You also get a lot of additional controls such as choosing which playback buttons are visible and even determining the color scheme to better match your overall site. You can also add Call to Action buttons during the video, which is helpful if you want to redirect a viewer to a landing page after the video.
Of course, this is a paid option and not free like Youtube, but for a small price I appreciate being able to embed clutter-free videos – and my clients do as well.
Questions? Comments
Let me know if you have any more questions about embedding YouTube videos or Vimeo videos on your site. Happy to delve in deeper and there are probably more links I can share. I found my embed code on another blog post like this one. You can also see all the standard instructions on embeds from YouTube here.