More Control over Embedded YouTube Videos

Dropping a YouTube video into WordPress couldn’t be easier: just copy the URL from YouTube, paste it into the post, and WordPress takes care of the rest, wrapping it up in an HTML5 video player. Easy peasy. Like this clip of Rodney Dangerfield on Carson in 1979. Oh, the things you find on YouTube.

Above: I just pasted https://www.youtube.com/watch?v=jrFgD9-l390 right into the post. Note that I have no control over the size of the video.

But what if you don’t want to see related videos at the end? Or you want to hide the video title, or use YouTube’s “modest branding” because their red logo clashes with your website design? For that, you’ll have to go a little old school and use an embed code. YouTube makes it easy to generate that code, but their configurator doesn’t address all of the options you have available; as I write this post there are 21 option parameters you can set when embedding a video.

Some are going to be a bit too esoteric to be of interest to the average blogger or content creator; it’ll be up to you to take a look at what’s available and make use of those that make sense for your use case.

It’d be nice if I could just add some of those parameters to the URL like: https://www.youtube.com/watch?v=jrFgD9-l390&rel=0&controls=0&showinfo=0 to make the changes I want, but WordPress doesn’t work that way.

In my case, I had a client who wanted to display a fundraising video on their site but didn’t want related videos to show at the end. I’ve always found related videos to be problematic as well since YouTube controls what shows up there and it can change at any time. The concern is that you can end up with a competitor’s video being featured on your site. Or worse, find something objectionable or controversial.

Share, then Embed

Share, then Embed

If you’re the kind of person who digs video walkthroughs and don’t want to read through the solution, I put a screencast together and embedded it at the bottom of this page.

So on to the solution: generating an embed code on YouTube, then tweaking that code a little bit to get what you want. If you’re uncomfortable with code, fret not. It may look like gobbledegook to you, but there’s a logic to it that I hope is easy to grasp. To get started, head on over to your YouTube video, click the SHARE button below the title, then click EMBED.

WordPress Text Mode

Get yourself into text mode

In this dialog box, you’ll find some HTML and a few checkboxes. Set them the way you need, then click the COPY button. If you didn’t see all the settings you need – of the 21 parameters, only four are available – you’ll have to add them in code. The easiest thing to do is paste it into WordPress’s editor in Text mode and add some parameters there. In Rodney’s case, I chose to shut off the “Show suggested videos when the video finishes” and “Show video title and player actions” options, then copied the code. This is what I got:

<iframe width="560" height="315" src="https://www.youtube.com/embed/jrFgD9-l390?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Which gets me part of the way there. The title’s gone, and you won’t see related videos when playback ends:

But I want the video to be the full width of my content column. For that I’ll have to do set the height and width parameters accordingly, so I’ll need to know the width of the column. If you’re on a Mac, it’s pretty simple to get a measurement: hit command-shift-4 to bring up the screen capture utility, then click and drag to measure the width. If you do this and let go of the mouse button you’ll take a snapshot, but if you hit the esc key before letting go you’ll cancel the snapshot.

Windows doesn’t do it quite that simply, so your best bet may be to install a Chrome extension like Pixelzoomer. In my case, the content column is 858 pixels wide. The embed code I copied over from YouTube sets the video to 560 x 315, so I just have to scale it up to match. You can use a handy tool like this one to do the math. For my column the correct size is 868 x 488, so I edit the embed code to match. The embed code I ended up with is <iframe width="560" height="315" src="https://www.youtube.com/embed/jrFgD9-l390?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>. Here’s the result I came up with.

Amy to the rescue

As I try to point out often at our Meetup, I’m far from the final authority on all things WordPress, so I love it when someone puts their hand up and says “Dave, I’ll take it from here” because it means I’m about to learn something. Quite often it’s something I’ve been doing wrong or would at some point in the future spend an hour frantically flogging Google for.

So as Amy pointed out in the comments for this post, my code isn’t responsive – the video is chopped off at the sides on smaller devices. A big no-no here in 2018. So using her suggestion of employing the CSS padding hack I’ve got it working correctly below. Info on this hack can be found here. And here. Over here, too. It’s all pretty dense and induces crossed eyes.

Here’s what we end up with when it’s all said and done:

<div style="width: 100%; padding-top: 56.25%; position: relative;">
<iframe style="position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;" src="https://www.youtube.com/embed/jrFgD9-l390?rel=0&showinfo=0" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

You’d likely want to take the inline styles added to the div and iframe and make them into a CSS class. In her example, Amy named the class “video-player,” which is about as logical a name as you can come up with.

An important thing to note here is that the padding-top property determines the aspect ratio of the div your video is sitting in. This is because padding is calculated based on the *width* of the container. So you need to calculate your aspect ratio into a percentage to determine the value for padding-top. Here’s a handy reference:

  • 16:9 = 56.25% (this is what I used above)
  • 4:3 = 75% (used below, left)
  • 3:2 = 66.66%
  • 8:5 = 62.5% (used below, right)

As you can see, you’ll want to match the aspect ratio of your video to avoid the black bars.


Or, just use a plugin

You may be thinking “there are tons of plugins available for embedding videos from YouTube and other sources,” and yeah, you’d be right. I’ve used some myself, but only when I have a site that has plenty of videos to embed. Every plugin installed gives hackers one more target and adds to page load, so I try not to add plugins I’m only going to use once unless there’s no easy way to get something done without it. Feel free to try some on that list, you may find one that gets the job done for you. But if you only have one or two videos to embed, give this method a try.

stuff we dig

FYI: yes, the above are affiliate links, so we do make a small amount of money if you follow them over and buy what they're selling. Thank you for helping pay our hosting costs!

Posted in

Dave Kuhar

Dave is the jack-of-all-trades running Transmit Studio, a media creation lab in San Jose. He's built more websites than he can remember, well over a hundred of them on WordPress. Whether it's tradeshow booths, video/TV, graphic design, presentations, magazine, tearsheet, and catalog layout, corporate identity packages, or just about any other kind of visual communication project, he's worked on it!

3 Comments

  1. Amy on April 2, 2018 at 9:16 pm

    Hi, Dave;
    Great Meetup tonight.

    When you look at this page on a phone, the first video looks fine, but the second one is cut off. I’m not sure if this was done deliberately, but it’s a good demonstration of why you might want to avoid using fixed pixel sizes for assets on the web. Many beginner WP developers may not have encountered that idea.

    The way I handle this is to put the video code in a container with the CSS percentage padding hack, and then set width and height to 100% on the video itself. You can see this working here http://iso-200.com/2018/02/26/consent-in-the-year-of-the-dog/

  2. Dave Kuhar on April 3, 2018 at 11:43 am

    Thanks, Amy! I’ve left my bad result up there and added your info.

    Also: interesting video on your site. I think we’re pretty good at understanding Riley’s body language most of the time but I’m definitely going to watch yours again closely to see if I can pick up anything new.

  3. Amy on April 3, 2018 at 4:48 pm

    Thanks for the compliment. It’s well worth the effort to do that 🙂

Leave a Comment