Updated: May 03, 2021
The New Watch-on-YouTube Button Will Likely Annoy Lots of Website Owners
It appears that YouTube (owned by Google LLC) has added more of their branding to embedded YouTube videos across the internet. If you have ever embedded a YouTube video on a website or blog, go back and take a peek at your work. You’re in for a surprise — and not a nice one, unfortunately.
While this is a pretty big deal from an SEO standpoint (search engine optimization), there was no warning and there seems to be little or no information about it in YouTube’s help center at the time of this writing or anywhere else on the web for that matter. This article is an attempt to rectify that.
In this article…
Watch on YouTube Button – What’s the Issue?
The issue is YouTube/Google now adds a “Watch on YouTube” button-link (some call it a badge) which prompts users to essentially leave a website or blog where they found an embedded YouTube video and, instead, watch it at YouTube.com.
As far as I can tell, this button/badge was added sometime after 2/12/2021. I noticed it suddenly start showing up on the website of one of my clients for whom I had been embedding YouTube videos over the course of a few weeks.
Here is a screenshot of the Watch on YouTube button.
While Google has every right to make changes to their products and services – especially free services like basic YouTube channels – it seems a bit less than ethical for them to invite web publishers across the planet to use their free video sharing service for well over a decade (Google acquired YouTube in 2006) and then suddenly introduce a button-link that will effectively hijack a percentage of the viewer traffic that otherwise would have remained on the publisher’s website or blog.
New Branding Not Very Modest
As you can see in the screenshot shown above (Exhibit 1), YouTube/Google positioned their new Watch on YouTube button-link quite prominently. No one is going to miss that. It displays on the thumbnail cover image until the user either clicks/taps the start button in the center of the video or clicks/taps the Watch on YouTube button in the lower left. The latter, of course, will take the user away from the publisher’s website to YouTube.com, probably in many cases never to return to the publisher’s website.
The Watch on YouTube button is so prominent that some users may perceive it as an instruction rather than an optional prompt and click/tap it thinking that’s what they need to do to watch the video.
In 2011, YouTube/Google introduced the modestbranding parameter enabling publishers to remove the clickable YouTube logo from the control bar of the embedded video player. (The modestbranding parameter is a separate issue from the “Watch on YouTube” button/link.) The modestbranding parameter simply needs to be appended to the end of the URL in the HTML code and set to one (i.e., modestbranding=1) to remove the YouTube logo from the control bar. The modestbranding parameter has no effect on the newer “Watch on YouTube” button.
Considering that YouTube/Google made the modestbranding parameter available a decade ago, it seems reasonable to assume they were sensitive to the fact that some publishers might want to remove the clickable YouTube logo to reduce the potential for users to navigate away to YouTube.com.
So, that begs the question Why, suddenly 10 years later, would YouTube/Google implement such an aggressive “additional” layer of branding clearly intended to take hard-earned traffic away from video publishers?
Adding salt to the wound… the Watch on YouTube button is so large, publishers have pointed out that, in some cases, it covers important visual aspects of the thumbnail image (static image shown before the video begins.)
Confusion Between the New Watch on YouTube button and the YouTube Logo in the Control Bar
This issue can be confusing because there are now two different buttons/links containing the YouTube logo in the YouTube embedded video player. The newer one, and the focus of this article, is located in the lower left corner of the video as shown in the screenshot above (Exhibit 1). The other is the normal YouTube logo located in the lower right-hand corner of the video in the video control bar as shown below (Exhibit 2).
In researching the Watch on YouTube button-link issue, I found some confusion in the few blogs and forum posts currently addressing this newer issue. Here is an example in a support forum at WordPress.org. The creator of the post clearly explained that they want to know how to remove the “Watch on YouTube” button located in the bottom left of their video. However, if you scroll down to the post authored by roam92, the modestbranding=1 parameter is offered as the solution. However, as explained above, that only removes the YouTube logo in the bottom right corner, in the control bar. It does not remove the new “Watch on YouTube” button in the lower left. Hence, no real solution was provided in this thread yet the issue is marked resolved. (…?)
How to Remove Watch on YouTube Button — Two Methods
Method #1: Use the Controls Parameter
To be clear, this first method is not ideal because it results in a YouTube logo (also referred to as a watermark) appearing in the lower right-hand corner, see Exhibit 3, below. (Not to be confused with the logo that appears in the video control bar, see Exhibit 2, above.) The fact is, the developers at YouTube/Google have things pretty well locked down. One way or another they are going to brand their products. It seems to be a question of how obtrusive they’re going to be.
You can remove the Watch on YouTube button by removing the video control bar with the controls parameter. Like the modestbranding parameter, the controls parameter needs to be appended to the end of the URL in the HTML code. But in this case, it needs to be set to zero (i.e., controls=0).
Unfortunately, as you might expect, removing the control bar eliminates useful controls such as closed captions, full-screen mode, and playback speed. However, losing access to the control bar is probably the lesser of the evils for most website owners.
The screenshot below (Exhibit 3), shows how removal of the video control bar results in a YouTube logo (watermark) being displayed in the lower right corner. (Yet another YouTube logo! While in a similar location, this is not the logo normally displayed in the video control bar since the control bar is gone in this case.)
Fortunately, the watermark is a bit more discreet than the “Watch on YouTube” button/badge and, most importantly, it does not prompt the user to navigate away to watch the video at YouTube.com. This logo fades away after the first few seconds of playback but reappears if the video is paused.
Embed Code Example
The following is an example of YouTube embed code with the controls parameter set to zero (0) effectively disabling the Watch on YouTube button. The controls parameter is appended to the end of the URL and must be preceded by a question mark.
Screenshot showing controls parameter set to zero
Code with controls parameter set to zero
<iframe width="560" height="315" src="https://www.youtube.com/embed/Z13-yP3Zhns?controls=0" title="YouTube video player" frameborder="0" ></iframe>
So, as you can see in the above embed-code example, the controls=0 parameter is what removes the “Watch on YouTube” button in this solution – NOT the modestbranding parameter. The modestbranding parameter is not even used here. It’s irrelevant because the controls parameter disables the video control bar which is where the original YouTube logo resides. So, if the video control bar is disabled, so is the YouTube logo within it.
Method #2: Remove Watch On YouTube Button by Limiting Video Size
Interestingly, the size of an embedded YouTube video determines whether the new Watch On YouTube button will be displayed. When I say size, I am referring to the iframe dimensions in the embed code. Typically, for me, that’s 560w x 315h based on the size of the videos I usually upload to YouTube. Your iframe dimensions may be different but very likely are larger than 514w x 289h.
Videos with an iFrame size of 514w x 289h or Smaller DO NOT Show the Watch on YouTube Button
Exhibit 4, below, is an actual embedded video, not a screenshot. The Watch on YouTube button does not appear in this case because the video size (the iframe size) was limited to a maximum width of 514px.
In other words, if you are familiar with HTML/CSS, I wrapped the embed code inside an HTML container div (class=”vid-container”) and used the max-width property with a value of 514px. That’s smaller than YouTube’s more typical 560 pixel width and just enough to avoid the Watch on YouTube button.
In addition, the modestbranding parameter was added and set to one (1) to disable the YouTube logo that normally appears in the video control bar in the lower right corner. Since Exhibit 4 is an actual video, you can click/start it to confirm this.
Videos Larger Than 514w x 289h DO Show the Watch on YouTube Button
In contrast, in the next example (Exhibit 5), using the same embedded YouTube video as above (Exhibit 4), the Watch on YouTube button is displayed (if you’re on a desktop) because the HTML container div (class=”vid-container”) is set at a wider max-width value of 560px, which is one of the standard widths used in YouTube’s default embed code. If you are reading this on a smartphone, you will need to change to landscape mode (which will increase your screen width) to see the Watch on YouTube button show up in Exhibit 5. This is discussed in more detail below.
Maintaining an aspect ratio of 16:9 as recommended by YouTube/Google, based on my testing, 514w x 289h is the largest iframe size that can be used if your objective is to avoid showing the Watch on YouTube button — anything larger will trigger it.
You can easily, independently verify this. If you are using a desktop computer, bring up a web page containing an embedded YouTube video that defaults to a standard YouTube width of 560px or larger — from any website. Avoid videos that have been reduced to a smaller thumbnail size. (Here are some random examples showing the Watch-on-YouTube button as of this writing: example 1, example 2, example 3.)
Next, resize the width of your browser window to roughly the width of a smartphone. It doesn’t need to be exact but roughly a width of 400 pixels or smaller. Then clear your browser cache and refresh the page. You will see that the Watch on YouTube button disappears.
If you happen to be reading this article on a smartphone, you can still independently verify this phenomenon. As in the desktop test, bring up a page with an embedded YouTube video (you can use one of the links to the examples above) with your smartphone in portrait mode, not landscape. Don’t play the video, just view the page. The Watch on YouTube button should NOT be displayed. (You may need to clear browser cache if you’ve previously viewed this page. )
Next, view that same page with the embedded YouTube video in landscape mode on your smartphone. Don’t play the video, just refresh your browser and you should see the Watch on YouTube button appear. That’s because the video width now exceeds 514 pixels. (If this did not work for you, you may need to clear your browser cache. Using Safari on my iPhone 12, I did not need to clear cache.)
Finally, if you hold your phone upright again and go back to portrait mode and refresh your browser again, the Watch on YouTube button will disappear. Hence, when it comes to the Watch-on-YouTube button, size matters.
CodePen with CSS/HTML for Avoiding the ‘Watch on YouTube’ Button
Toggle the tabs to see the CSS or HTML code.
If you click on the HTML tab in the upper left corner of Exhibit 6, above, you will see that the iframe was wrapped in two divs. The outermost div was given a class called “vid-container.” The inner div was given the class “vid-wrapper.” Also, the width and height of the iframe were both changed to 100% (from the original values in the YouTube embed code.) This change to the iframe dimensions allows the video to be responsive and adapt to whatever screen size a viewer uses.
Next, if you click on the CSS tab in Exhibit 6, you will see that the outermost div, vid-container, is used to limit the width to 514px and center the video on the web page.
The inner div, vid-wrapper, is used to retain the video’s aspect ratio of 16:9.
Finally, the CSS applied to the iframe ensures that the iframe is properly positioned within its parent div.
CodePen with YouTube Embed Code (iframe) using Default Size of 560 x 315 → ‘Watch on YouTube’ Button Appears
In Exhibit 7, below, the size of the YouTube video was kept at the normal/default width of 560px. No CSS or HTML has been added. Notice that the ‘Watch on YouTube’ button appears in all instances. That’s because, without the necessary HTML/CSS code, the video is not responsive – the width never shrinks enough to force the Watch on YouTube button to disappear.
Best Solution for Removing the Watch On YouTube Button
If you don’t mind limiting the size of your embedded videos slightly to 514w x 289h, this second method is the better solution for removing the Watch on YouTube button. That’s because with method #2 you still have the video controls (captions, volume, playback speed, etc.) available for the user and you can apply the modestbranding parameter to remove the YouTube logo that normally appears in the video control bar.
Caution: If You Are Considering the “sandbox” Attribute, That Will Only Disable the Watch on YouTube Button-link, It Won’t Remove It
If you have searched the web for remove watch on youtube embed or youtube embed remove watch on youtube or something similar, there’s a good chance you have come across more than one web post promoting the “sandbox” as a solution. I have not recommended this as a solution in this article because the sandbox does not remove the Watch on YouTube button, it only disables it.
In fact, it can disable all links including your clickable picture (or logo, in the upper left corner of an embedded video) which allows viewers to subscribe to your YouTube channel. It can also disable the Facebook and Twitter share buttons depending on browser used, i.e., Firefox, in my testing.
Click/tap the various links in Exhibit 8, below, to see the effect of the sandbox attribute.
To be clear, this article is focused on how to remove the Watch on YouTube button, not how to disable it. Using the sandbox attribute to simply disable the Watch on YouTube button-link along with other links can be confusing to your site-visitors resulting in a less than optimal user experience.
SEO (Search Engine Optimization)
I think its fair to say that this new “Watch on YouTube” button will generally have a negative influence on the SEO value of many websites and blogs across the web. Site owners, web designers and marketers have been embedding YouTube videos for years to increase user engagement and improve the ranking power of their web properties. Many, if not most, will not have the time to go back and tweak the embed code to remove this new predatory button-link.
Over time, as web users choose to take advantage of the Watch on YouTube button, SEO related metrics such as time on page and average session durations will likely decrease for site owners who have embedded lots of YouTube videos on their web pages. YouTube/Google will essentially be cannibalizing the traffic of many of the YouTube publishers who helped make YouTube the monstrous success it is. What ever happened to Don’t be evil?
I hope this helps clarify this issue; especially the difference between the new “Watch on YouTube” button and the pre-existing YouTube logo which has been located in the YouTube video-control bar for years.
Bottom line, this new more aggressive layer of branding is not a good thing for website owners, designers and digital marketers who have spent time and effort over the years embedding YouTube videos.
What are your thoughts? Do you consider this traffic-building tactic by YouTube/Google as predatory? How are you dealing with it? Do you have an alternative solution for disabling it or are you thinking about using a different video-sharing service? Leave a comment below.