Top

How to Remove Watch on YouTube Button from Embedded Videos

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.

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.

How to remove the Watch on YouTube button. Screenshot showing the button.
Exhibit 1
Screenshot showing the new “Watch on YouTube” button-link.

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, 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).

Screenshot showing the YouTube logo on lower right-hand corner in the how to remove the watch on youtube button article.
Exhibit 2
Screenshot of the YouTube logo in the control bar. This logo in this location has been displayed by default for years and can be removed with the modesbranding=1 parameter.

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 (not to be confused with the logo that appears in the video control bar; see Exhibit 2.) 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).

VIDEO CONTROLS PARAMETER
This parameter indicates whether the video player controls are displayed:
controls=0 – Player controls do not display in the player.
controls=1 (default) – Player controls display in the player.
Source: https://developers.google.com/youtube/player_parameters#controls

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.

As shown in the screenshot below (Exhibit 3), 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.

Screenshot of YouTube logo after control bar is removed resulting in removal of Watch on YouTube button
Exhibit 3
Screenshot after the control bar is removed with the controls=0 parameter. This parameter setting also removes the new “Watch on YouTube” button but, while less obtrusive, it results in a YouTube logo (watermark) displayed in lower right-hand corner.

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

Embed code image

Code

<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.

Exhibit 4
The video embedded above does NOT show the Watch on YouTube button because the iframe size (max-width: 514px) has been reduced from YouTube’s more typical embed code width of 560px.  Also, the YouTube logo which normally appears in the video control bar in the lower right corner is disabled because the modestbranding parameter was added.

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 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.

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.

Exhibit 5
Embedded video shows the Watch on YouTube button-link on screens wider than 514px because the iframe size is allowed to expand to YouTube’s standard width of 560px.

You can easily 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 easily 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.

See the Pen
How to remove the new ‘Watch on YouTube’ button from embedded videos
by Render Visions Consulting (@rvc2)
on CodePen.

Exhibit 6
The above CodePen shows the HTML and CSS used to avoid having the Watch on YouTube button-link show on embedded YouTube videos. Toggle the tabs to affect what is displayed in the CodePen window.

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 center the video on the web page. And the inner div, vid-wrapper, is used to retain the video’s aspect ration 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 this case, 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 the lower left corner.

See the Pen
YouTube Embed Code using Default Size of 560 x 315 — ‘Watch on YouTube’ Button Appears
by Render Visions Consulting (@rvc2)
on CodePen.

Exhibit 7
The above CodePen includes the YouTube embed code exactly as copied from YouTube.com with no HTML or CSS added. Because of the larger video size (by default), the Watch on YouTube button link appears. Click the HTML tab to display the code in the CodePen window.

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 how to remove the watch on youtube button 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 disables 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 also disables the Facebook and Twitter share buttons.

Click/tap any link in Exhibit 8, below, to see the effect of the sandbox attribute.

See the Pen
Disable ‘Watch on YouTube’ Button by Disabling All Links in Embedded YouTube Videos
by Render Visions Consulting (@rendervisions)
on CodePen.

Exhibit 8
This CodePen is using the same YouTube embed code as Exhibit 7 but with the sandbox attribute added (with the appropriate allow values). Links are disabled – not removed. Click the HTML tab to view the code.

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 all 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?

Your Thoughts

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.

 

Comments

  1. Posted 2 days ago

    Ron

    The 514×289 solution is a reasonable solution. Unfortunately it does not work if you have a higher resolution monitor (1920×1080).


    • Posted 1 day ago

      Robert V. Connelly, Jr.

      Ron, The 514px max-width solution actually does work regardless of monitor resolution. All of my monitors support 1920×1080. I took a look at the embedded video on your About Us page using dev tools and it shows an iframe size of 560×315. That’s too wide. If you reduce the 560 down slightly to a max-width of 514px, the Watch on YouTube button will go away.

      To maintain the proper aspect ratio you also need to add some CSS code as shown in the codepen in Exhibit 6 in my article here. This HTML/CSS will also make your videos responsive (adapt in size to the browser window size) on larger desktop monitors.

      I noticed that the mobile version of your site already has CSS code to make your videos responsive but the desktop version of your site does not. To confirm this, just bring up your About Us page on a larger desktop monitor. Then reduce the width of your browser window by dragging one of the sides with your cursor to around 300 or 400 pixels, then refresh your browser/page. You will see that your video does not adapt, it overflows outside its container – even after clearing browser cache. (That does not happen when your site is viewed on a smartphone – the video size adapts and the Watch on YouTube button does not display because the width is less than 514px.)

      Not having responsive videos on a desktop layout is not a major problem, of course, since most people don’t shrink their browser windows when they view a site on a desktop monitor. But I do suggest you add a max-width of 514px to our desktop layout to get rid of the Watch on YouTube button. To do that properly you need to use the exact code (HTML and CSS) shown in the codepen in Exhibit 6. Just toggle the HTML and CSS tabs in the codepen in exhibit 6 to view the code. A side benefit is that your videos will become responsive when viewed on a desktop. -Hope that helps.


  2. Posted 2 weeks ago

    Shannon

    Thank you so much for this post! I have shared on FB user groups.

    I have subscribed, but get SO much SEO spam I hope that the subject line in your emails lets me tell you apart. 🙂


    • Posted 2 weeks ago

      Robert V. Connelly, Jr.

      I’m very glad you found this post useful, Shannon. 👍 Thanks for sharing it on FB user groups. 🙏


Leave a Comment

Comments are moderated so they do not appear immediately. Please be relevant to the topic covered in the article. Off-topic comments and solicitations are treated as spam. Legitimate, relevant comments are approved swiftly. Thanks for stopping by!

Your email address will NOT be published.

Please note - After submitting your comment using the above "Submit Comment" button, your comment will show above the comment form flagged as "awaiting moderation." You may need to scroll up to see it. Please do not submit your comment a second time. Thank you.

Render Visions Consulting