Last Updated on May 5, 2020 by Sunny Staff
A Step-By-Step Guide to Implementing Custom YouTube Embed Code
A picture, worth a thousand words. Which means video is, what, priceless?
YouTube is the most popular social media platform on the planet. And a veritable sea of cat videos, movie trailers and makeup tips. It’s BIG, but so is The Mall of America–you wouldn’t just leave your kid to wander there.
Same goes for your brand and marketing that brand to your customers. But you can embed your awesome YouTube videos into your own site.
Once you look below, you’ll see there are simple and cost-free steps to making this happen–and an enthusiastic guide (us!) to help you do it.
Presto, priceless video and happy customers. Let’s get to it.
Uh, What’s Embedding Again?
Don’t worry, there are no dumb questions, so let’s jump on square one: Embedding allows you to place an actual video that exists on a video streaming website (like YouTube) on a page of your website. So instead of a link, you can watch the video within an article, in a popup window or full screen on your own website – whatever you like.
One, it’s easy, so that’s nice. But it’s also essential because hosting videos on your site is some high-calorie meals in terms of bandwidth. I.E. paying out more and more to your host (as any casino knows, the house always wins).
So, lean on YouTube to get more and more checkmarks on your social-media tally while trimming your hosting costs. Now take a moment and realize what a great time to be alive this is.
OK, class is in session.
Embedding = Easy-Peasy Lemon Squeezy
The ancient text speaks of the days when one had to insert YouTube embed code into your website to link to YouTube. OK, maybe that wasn’t hard, but now it’s utterly and disconcertingly EASY.
Go to your video on YouTube. Click on the SHARE button (just below the video; it’s got a little arrow near it).
A pop-up menu will give you social-media links and an EMBED <> icon on the left. Don’t be shy, click embed!
Look below the list. That’s your YouTube embed code, ready for copying onto your site. Click the COPY button, and then head over to your WordPress website to place your video embed code.
Different editing modes in WordPress
This is where it can get confusing, but if you embrace this next part, it will serve you whenever working on content. WordPress has two different “modes” of editing—”Visual” and “Text.” It is important for you to use the “text” mode when pasting the new video embed code. If you paste it within the “visual” code window, you’ll see the code displayed on your website instead of the video. Give it a shot and you’ll see what I mean.
Go ahead, you won’t break the website ;). Once you have placed the video embed code correctly in the “text” mode editor window you will find by changing to the “visual” editor your video will display a preview (even in the editor.) This is how you’ll know you have done this correctly. Click publish or update and your new video is ready for visitors to click on and enjoy.
You’re a Certified Embedder now. Now go have a soda.
Further Customize YouTube Embed Video Options
Let’s take things up a notch or two. Customizing the YouTube embed options of the video for your website lets you control what users do with it and allows you to more finely tune what you want them to see. Now let’s look at some of the most common options and what they mean. So, go back to YouTube and click on SHARE again.
Next, click on the Embed icon to open a menu. You’ll see four checkbox options (some may already be checked):
- Show suggested video that displays after the video finishes.
- Show player controls, which allows visitors to control video playback and volume.
- Show video title and player actions; currently, this controls the Watch Later and Share functions embedded on the video.
- Enable privacy-enhanced mode, which lets visitors prevent YouTube from storing their information.
A Start At checkbox lets you instruct where you want the video to begin, a useful tool if you want to showcase a particular section.
This is all it takes to embed YouTube videos in your WordPress website.
What about the related videos that show up at the end of a YouTube video?
So you get to the end of the video and up pop a bunch of tiles of videos that are somehow related to yours. Most of the time, even if these are related in some way, don’t support your video, distract the visitor and can even drive them from your site. You can control this (a little) – but even that will help you avoid some bizarre related video showing up…
You have two options to remove the related videos at the end of your YouTube video. The first is by manually adding a little bit of code. To do this simply add ?rel=0 right at the end of the video id code. The “video id” is the string of numbers and letters that follow embed “slash” (/). It is important to know how to identify the video id as it is the key to embedding a video into your WordPress site. See the example below.
<iframe src="https://www.youtube.com/embed/FhGCV6J3CRc?rel=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>/code>
The second option is to use this handy tool from Classy Nemesis. It is a full-feature free web-based tool much like that on YouTube’s site, but enables you point and click control over all of the YouTube embed options. More on this below in Advanced Custom YouTube Editing.
WordPress also lets you embed a video into a sidebar using the theme customizer:
- From the WordPress dashboard, navigate to Appearance, Themes, and Customize.
- Select Customize Widgets and navigate to Sidebar. (Some themes offer several sidebars; be sure you choose the one you want).
- Click on Sidebar, then on Add a Widget. Type in Video if it doesn’t appear right away in the drop-down menu.
- Click on the video icon, then on Add Video.
- The media library pops up. Look for the Insert from URL button on the upper left sidebar and click.
- Paste your YouTube video URL.
- A preview pops up; click on Add to Widget.
- Add a title to the video; once you save and publish, the title appears above the video in the sidebar you specified.
Advanced Custom YouTube Editing with Helper Tools
Maybe you noticed a code in the Share menu that begins with < iframe. This iframe code lets you manipulate things like the size of your video, including disabling the full screen so your website remains visible, autoplay, and other functions. Normally, this requires actual coding.
WordPress plugins such as Youtube (sic) Widget Responsive and Simple YouTube Embed simplify advanced embed customizing. Or you can use this handy tool from Classy Nemesis, a.k.a. engineer/developer Jonathan Prusik.
Now you know how to use YouTube to boost your brand and engage your customers–on your very own site! Learn more and read up on other topic-related articles on our blog.
