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 the 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.
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 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, 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 of the YouTube logo in the video control bar. This logo in this location has been displayed by default for years and can be removed with the modesbranding=1 parameter. UPDATE: The modestbranding parameter was deprecated, effective 8/15/2023. Details here.
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).
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.
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.
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 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>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. UPDATE: The modestbranding parameter was deprecated, effective 8/15/2023. Details here.
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.
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, 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.
See the Pen
How to remove the new ‘Watch on YouTube’ button from embedded videos by Render Visions Consulting (@rendervisions)
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. In the CSS, you will see that the video width has been limited to 514px, which is the key.
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.
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 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.
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 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.
Posted 4 months ago
Thank you so much! This info you provided is pure gold:
videos sized as width=”514″ height=”289″ or smaller do not display YouTube branding
Posted 4 months ago
Glad you found it helpful, Robert.
Posted 1 year ago
Great article! but is there any possibility to remove the share button in the video?
Posted 1 year ago
I am not aware of a way to remove the share option in an embedded YouTube video. It seems to me that doing so would be pointless since the user can simply copy the URL and share the web page containing the video.
Alternatively, this article by Shaun Poore explains how to embed private YouTube videos.
Posted 1 year ago
I love your page! The samples are great, but how to add more parameters than one to the embed code to have a cleaner screen?
For example, I want to enable full screen option, AND
remove the youtube link
remove the channel name
remove watch on youtube
remove the recommended videos that show up in the end (to just display a blank screen)
I’ve struggled with this quite a bit. YouTube makes the embed very cluttered with unrelated content nowadays.
Posted 1 year ago
Tom, YouTube has a list of supported parameters here: https://developers.google.com/youtube/player_parameters#Parameters.
Regarding your examples of what you would like to do, there is no way to remove the channel name or the YouTube link that goes with that. As for removing the videos that show up at the end of a video to display a blank screen, there is no way to do that either. But you can use the “rel” parameter to ensure that the YouTube video player will show only videos related to the same channel as the video that was just played. (See link to YouTube’s list of supported parameters, above, for “rel” parameter.)
As for the removal of the Watch on YouTube button, that is what this page is all about.
Posted 2 years ago
Do you know if there is a way to show the ‘Like’ Icons on an embed YouTube video? I never notice that those icons are not there on an embed until today…you can only see ‘Like’ Icons on Youtubes site…How can I get these Icons to show?
Posted 2 years ago
I have never tried to add the YouTube “Like” icon to an embedded YouTube video. Here two relevant resources you might want to look at if you haven’t already.
Use the YouTube Video “rate” API – This post at stackoverflow.com asked the same question. While the question was posted over 9 years ago, the answer is much more current – posted July 2020. It points to the YouTube “rate” API and states that “your site visitor does not need to be logged in but your application must be.”
Add a Like Button widget – Alternatively, you might consider simply adding a Like button with just a few lines of HTML code. See https://likebtn.com/en/. They also have plugins for the major CMS platforms and website builders. For example, their WordPress plugin that has 7K+ active installations and a 4.5 rating out of 5. And the WP plugin owner is responsive in the WP support forum. They offer a freemium pricing structure.
Hope that helps.
Posted 2 years ago
Thanks, this did the trick.
Posted 2 years ago
Hi, this is an extremely detailed and interesting analysis. Congratulations and thank you.
Is there any chance perhaps, for neophyte site owners like me to please provide a really simple step-by-step process of what you suggest to do? (Without the analysis.)
E.G.:
Step 1. Do this.
Step 2. Do this.
Forgive me please, my inadequate knowledge can’t distill that process from your excellent article.
Fully understand if you don’t have time or wish to. Or perhaps it can’t be simplified like that?
Thanks again.
Posted 2 years ago
Thanks for the feedback. I will try to make time for that.
-Cheers
Posted 2 years ago
Great article!
Thanks.
Posted 3 years ago
great article. How do you add ?rel=0 AND the controls=0 parameter.
As you likely know the ?rel=0 prevents videos from other channels displaying at the end of the embedded video.
Posted 3 years ago
Thanks Justin.
Multiple video player parameters can be used in the URL string to affect embedded YouTube videos. I focused on just the relevant one for this article (controls=0 in Method #1) to avoid confusion.
I agree, the rel=0 is a good one. I use it with all the embedded videos I work with on my clients’ websites to ensure that only videos from their channels are displayed when playback of the initial video ends.
Here is an embed code example using multiple parameters:
1) The controls parameter which, as already discussed, when set to 0 (zero) eliminates the video controls.
2) The rel parameter which, as you mentioned, when set to 0 (zero) ensures that video thumbnails from unrelated channels are not displayed when playback of the initial video ends.
3) The modestbranding parameter set to 1 (one) prevents the YouTube logo from displaying in the control bar.
In terms of syntax, as discussed in the above article, parameters need to be appended to the end of the URL string. And while the first parameter needs to be preceded with a question mark (?), any subsequent parameters need to be separated with an ampersand (&).
Google provides a full list of supported parameters here: https://developers.google.com/youtube/player_parameters#Parameters
Posted 1 year ago
Thanks, Robert. Gosh I missed your response a year ago. But glad that I just saw it.
Posted 3 years ago
Hello. Thanks for this solution. I wrote the initial post here, which you replied to:
https://support.google.com/youtube/thread/102566152/remove-watch-on-youtube-link-from-embedded-videos?hl=en
I appreciate your work here. I just now saw your reply. Very soon after I wrote the post, in the link above, my YouTube school/education channel, without warning or violations of YouTube’s policy, was “removed.” This happened right at the beginning of a 10 week term, leaving me without any educational video content for three college level online courses. There was no document of why the channel was removed. It was just gone in an instant, with students left without a complete course, and me having to rebuild. I appealed through the process. Info. Tech. at my school appealed. It took seven full weeks to get the account reinstated and there never was an explanation why the channel was “removed,” despite my repeated inquiries before and after the channel was removed. There was only obfuscation, misdirection and avoidance of very pointed questions I had. I have since started to migrate my instructional videos to Vimeo, and so far it’s been an excellent experience working with their platform.
Clearly using YouTube for education is risky and control is limited. First YouTube tries to tempt/link students away from their online courses i.e. my course content. Then without warning or communication, they remove said educational content, 100’s of videos, for no reason….content which is clearly authored in the context of the educational services they offer my university.
Posted 3 years ago
Hello Kevin. Sorry to hear about the run-around you got from YouTube. Very strange. You would think they would provide a reason for the content removal. Glad to hear it was reinstated.
I agree that Vimeo is a good alternative to YouTube, although, their basic membership has a weekly upload limit which can be annoying.
Posted 3 years ago
Hi, just a note or two (and I am new here.)
I’m embedding this into a wordpress site. It took me a moment to realize you were referring to the iframe embed link, and NOT the youtu.be sharing link.
I adjusted the size, as per your comment, and it worked great. When I hover over the video with the mouse all of the controls appear *except* that “View on YouTube” thing. Thanks!
It also does not appear when I fullscreen the video, so that’s cool too. Ditto on the mobile.
Posted 3 years ago
Hi Greg, I’m glad you got method #2 working. Your point is well taken about distinguishing between the YouTube embed code vs. the YouTube sharing link. I’ve thought about doing a screencast or text tutorial clarifying how to obtain the embed code but so far I have not had the time. I’m glad you figured it out. Thanks for your feedback.
Posted 3 years ago
Thanks for the detailed response , I kept the video size as it was cuz I do prefer big videos and I did fix the mobile issue…
At least I think I did?
So if you could check it again that would be awesome because it turns out there was a line in the header that I had to put concerning device width.
Posted 3 years ago
William, I brought your site up on my iPhone 12 (as well as via dev tools) and your pages now expand to full width; your mobile layout is now legible without the need to pinch/zoom. That’s great.
I don’t know if you care but it looks like you have some additional CSS code to tweak because your pages now “float” on mobile devices. When I swipe one of your pages to the left (on my iPhone or using dev tools) the entire page moves out of the browser window. That’s not a showstopper, of course, the main thing is your mobile visitors can now read your content. But you may want to address the floating page issue. I suspect that the fix is in one of your CSS media queries.
Oddly, when I tested your site using Google’s Mobile-friendly test, it passed the first time and then failed on all subsequent tests. Intermittent pass/fail results like that usually mean that your CSS stylesheet sometimes does not get loaded by Googlebot. And that often means there’s a page-load speed issue.
Here are the Mobile-friendly test results. In the upper left section of the results there is a link to “View Details” regarding Page Loading Issues. Click that and you’ll see that 33 page resources couldn’t be loaded. That includes two CSS stylesheets that could not be loaded.
I recommend you use Google’s PageSpeed Insights tool to address some of that. Most sites never get to a perfect score with PageSpeed Insights but the data provided can be very helpful in finding and fixing significant page loading problems. For example, click here to run the PageSpeed Insights test on your home page. You will see that you can glean significant time savings by serving your images in next-gen formats and by properly sizing your images. There are WordPress plugins that can help with the next gen formats, as indicated in the drop down.
Hope that helps.
Posted 3 years ago
The shrinking option did not work for me plus it just looks weird but at the same time users will need to be able to rewind from time to time so I guess the only solution is a video container plugin that will allow me to control user options better.
Do you know of any?
And as for what ever happened to Don’t be evil, their horns were bound to be shown eventually!
Posted 3 years ago
William, I took a look at the About page on your site and noticed that the video on it expands to the full site-container width of 1080px. If you like presenting a large video to your desktop users, I can understand you not wanting to shrink it down to a max-width of 514px in order to remove the Watch on YouTube button.
However, optionally, if you did shrink it down, using some additional CSS code you could align the video to the right and wrap the opening text (the “Who we are” paragraph) on the left side of the video. That would not look weird at all, in my opinion. And with this approach, the video controls will continue to be available so the user could rewind as necessary and expand the video to full screen if desired.
Option #2 in the above article (limit video width) will always eliminate the “Watch on YouTube” button as long as the correct HTML/CSS code is applied, while leaving the video controls available to users. If option #2 did not work for you, from what I can tell using dev tools, it is because your site has a few issues at the CSS level. For instance, the HTML element (figure), which is wrapped around your video, is not coded to be responsive, i.e., expand/shrink with various screen sizes.
Also, your web pages do not render properly on mobile devices. They shrink way too much on smartphones making them difficult to read requiring users to pinch/zoom to see the text or watch a video. From an SEO standpoint, that is likely causing an increased bounce rate from mobile users and a less than optimal rank in SERPs since mobile-friendly is a Google ranking signal. Here is a test result of your About page from Google’s Mobile-Friendly test.
On a related note, here is a good article that talks about how significantly more searches are carried out on the mobile phone (64%) than on the desktop (35%). So, it’s important to get your web pages to a mobile-friendly state. Otherwise, in addition to experiencing ranking issues, you will have a hard time getting your videos to render properly on mobile devices.
In answer to your question, I generally try to avoid plugins if I can create the desired result with small code changes. In this case, however, I did initially search for a plugin to remove the Watch on YouTube button but came up empty. If you find one, please let me know.
During my research, I came across this excellent article by Brian Jackson at Kinsta: 10 Ways to Integrate and Embed YouTube Videos in WordPress. You may find it useful. While none of the plugins listed will remove the Watch on YouTube button (unless you set the max-width to 514px or less as explained in my method #2 in the article above) you might find one of them helpful for rendering your videos responsively on mobile devices.
Hope that helps.
Posted 3 years ago
The 514×289 solution is a reasonable solution. Unfortunately it does not work if you have a higher resolution monitor (1920×1080).
Posted 3 years ago
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 your 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.
Posted 3 years ago
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 3 years ago
I’m glad you found this post useful, Shannon. 👍 Thanks for sharing it on FB user groups. 🙏