How to remove youtube branding after embedding video in web page?

Question

I am using

<iframe width="550" height="314" src="https://www.youtube.com/embed/vidid?modestbranding=1&amp;rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

This removes right side bottom "Youtube" Logo. And also removes "Title bar" which appears on hover.

But in this problem is, When I hover on video then behind the right side bottom "Youtube" tumbnail / Text is coming and when I remove mouse then it disappears.

When I use "autohide=1" then control bar gets hidden and in the right-bottom corner there is one icon/image/logo of "Youtube" display on hover. I am using

iframe.setAttribute("src", "youtube.com/embed/" + youtube.id + "?modestbranding=1&;showinfo=0&;autohide=1&;rel=0;"); 

this. With this I am able to remove/hide Title bar and logo from the control bar but on right-bottom there is one other logo comes on screen on hover , which parameter should I use to hide that?

Bozeman

Why should you do that? you can host it yourself and use any custom players. – Breath

@Manu It's allowed: YouTube provides a paramater to do this: modestbranding (supported players: AS3, HTML5) This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player. – Ramillies

showinfo and modestbranding are mutually exclusive. see: https://mcmap.net/q/330167/-embedded-youtube-video-showinfo-incompatible-with-modestbranding – Metritis

how to remove that logo in andorid using youtube api when i click that its redirect to youtube i dnt want that or disable for that click event please – Bawd

@SubinJacob, sometimes like my app, the embed is too small and the logo covers all the thumbnail, and that is not disturbing YouTube brand... an eagle won't get disturbed by a butterfly. some other reasons might apply. – Myosin

to date; this worked out for me; keep showinfo=1 otherwise it won't work hope someone input in removing both title and branding reference – Myosin

@subln and what if someone can't afford $326777 per month for massive amounts of file hosti? – Dextrocular

Answer 1

You can add ?modestbranding=1 to your url. That will remove the logo.

modestbranding (supported players: AS3, HTML5)

This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player.

&showinfo=0 will remove the title bar.

showinfo (supported players: AS3, AS2, HTML5)

Values: 0 or 1. The parameter's default value is 1. If you set the parameter value to 0, then the player will not display information like the video title and uploader before the video starts playing.

You can find all options on the Google Developers website.

Note:

It doesn't fully remove the logo. There is still a small logo on the bottom left.

showinfo is deprecated and will be ignored after September 25, 2018: https://developers.google.com/youtube/player_parameters

Pisolite

thank you for your reply but I have added the same thing. But on hover at the right side bottom there "youtube" image or text is appearing and disappearing on mouse hover and mouse out. – Bozeman

You have to add a & to combine parameters, not &. – Pisolite

When I use "autohide=1" then control bar gets hide and right-bottom there is one icon/image/logo of "Youtube" display on hover. I am using iframe.setAttribute("src", "youtube.com/embed" + youtube.id + "?modestbranding=1&;showinfo=0&;autohide=1&;rel=0;"); this. With this I am able to remove/hide Title bar and logo from the control bar but on right-bottom there is one other logo comes on screen on hover , which parameter should I use to hide that? – Bozeman

I have added image of about my problem facing – Bozeman

I don't think YouTube allows you to remove their name/logo completely. By the way, check your url (what's the ; doing?) – Pisolite

Ok. That semicolon is removed. Thanks for help. – Bozeman

showinfo parameter has been deprecated now. Can't do anything – Jackquelinejackrabbit

modestbranding has also been deprecated: developers.google.com/youtube/… – Lipid

Answer 2

It turns out this is either a poorly documented, intentionally misleading, or undocumented interaction between the "controls" param and the "modestbranding" param. There is no way to remove YouTube's logo from an embedded YouTube video, at least while the video controls are exposed. All you get to do is choose how and when you want the logo to appear. Here are the details:

If controls = 1 and modestbranding = 1, then the YouTube logo is bigger, is on the video still image as a grayscale watermark in the lower right, and shows when the play controls are exposed as a big gray scale watermark in the lower right. example: <iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&amp;controls=1&amp&amp;showinfo=0&amp;modestbranding=1" frameborder="0"></iframe>

If controls = 1 and modestbranding = 0 (our change here), then the YouTube logo is smaller, is not on the video still image as a grayscale watermark in the lower right, and shows only when the controls are exposed as a white icon in the lower right. example: <iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&amp;controls=1&amp&amp;showinfo=0&amp;modestbranding=0" frameborder="0"></iframe>

If controls = 0, then the modestbranding param is ignored and the YouTube logo is bigger, is on the video still image as a grayscale watermark in the lower right, the watermark appears on hover of a playing video, and the watermark appears in the lower right of any paused video. example: <iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&amp;controls=0&amp&amp;showinfo=0&amp;modestbranding=1" frameborder="0"></iframe>

Fornicate

Apparently YouTube recently deprecated the showinfo param: https://mcmap.net/q/330169/-hiding-youtube-embed-title-and-39-more-videos-39-updated – Follansbee

Answer 3

Youtube have removed the ability to completely remove a YouTube link form an embedded YouTube video.

https://developers.google.com/youtube/player_parameters#modestbranding

Even by removing the showinfo section YouTube places a semi transparent logo in the upper right hand corner of a paused video.

Tichon

Answer 4

Since August 2018 showinfo and rel parameter doesn't work so answers which recommend to use them no longer works and modestbranding do not remove all logos

here is my tricky solution how to hide EVERYTHING

1. Before you start you should realize that all youtube's info are sticks to the top and bottom of iframe(not video, that's important)

2. Make iframe higher than the real video height. In iframe parameters set height = width * 1.7 (or other multiplicator)

3. Hide youtube's info under your header and footer with an absolute position at the top and bottom of iframe wrapper element. Height of header and footer could be calculated as: iframeHeight - (iframeWidth * (9 / 16))) / 2. If you want fullscreen than you should hide it outside screen visible zone and set overflow to hidden. (9/16 it is standard video screen size proportions, you could change it into yours)

4. In my case I use JS to destroy iframe after the video is finished so the user couldn't see youtube's offer with other videos

5. Also important note: since iOS 12.2 is replacing Youtube's player with their own, width and height calculation should be done in the constructor(in the case of React) because iOS player arrival cause page resize ->possible width&height recalculation-> video rerender -> video pause

code example jsfiddle.net/s6tp2xfm

A disadvantage of this solution is that it stretches image placeholder.

that's how it could look like with custom controls

Casease

How do you hid the top and bottom while the iframe is responsive? I use bootstrap embed to make the iframe responsive. getbootstrap.com/docs/4.1/utilities/embed – Uraninite

Additionally, how did you add the custom controls to the youtube? Such as pause/play button, volume button, and video process bar. – Uraninite

@KristinaBressler how to hide top and bottom you could check in link to jsfiddle above in a description, the calculation is based on screen width and video size ratio. Controlling of video is done with this youtube api developers.google.com/youtube/… But I found it too complicated and used React library over it with the same interface(sorry don't remember the name of it). Progres is calculated as current time / total video time – Casease

I'm using videojs. What I did was give the .vjs-tech class a width of 1000%, position: absolute;, then center it horizontally. Also hide the overflow on the .video-js class. – Gazehound

it worked like a magic for me as well. Thanks. – Isolationist

Answer 5

Remove YouTube Branding

To date: Seeing a lot of searches and suggestions to disable YouTube logo and branding from an embedded video; I recommend you consider the following:

1. I guess YouTube don't want you to do this otherwise they would allow that at their front end.
2. Some brands spending huge efforts to provide the media not for a 5 min. removal.
3. It's good to have the logo and respects brands rights.
4. You still have the video and the luxury of embedding it in your site/blog.
5. Spare some of your time; that is not possible.

6. Yet! You have the option of having Modest-Branding using this parameters:

   https://www.youtube.com/embed/'+videourl+'?modestbranding=1

And some other parameters for customization:

&showinfo=0 //Turn off Title & Ratings

&showsearch=0 //Turn off Search

&rel=1 //Turn on Related Videos

&iv_load_policy=3 //Turn off Annotations

&cc_load_policy=1 //Force Closed Captions

&autoplay=1 //Turn on AutoPlay (not recommended)

&loop=1 //Loop Playback

&fs=0 //Remove Full Screen Option (not sure why you’d want to)

And here is the general customization window:

^{Disclaimer: I don't work for YouTube; simply I respect the copyrights.}

Myosin

Answer 6

Yes It it True

1)By modestbranding=1 to your url. That will remove the logo that is appered in bottom lest as branding and

2)By &showinfo=0 will remove the title bar.

But I think You Can not Remove Both Think together

Just try Both thnik hear http://codegena.com/generator/Youtube-Embed-Code-Generator

1) when try hide logo

<iframe width='500' height='294' src="https://www.youtube.com/embed/YykjpeuMNEk?&theme=dark&autohide=2&modestbranding=1"frameborder="0"></iframe>

2)Now try to hide topbar

<iframe width='500' height='294' src="https://www.youtube.com/embed/YykjpeuMNEk?&theme=dark&autohide=2&showinfo=0"frameborder="0"></iframe>

==>But Now When We try to hide Both Information See the Limitation

<iframe width='500' height='294' src="https://www.youtube.com/embed/YykjpeuMNEk?&theme=dark&autohide=2&modestbranding=1&showinfo=0"frameborder="0"></iframe>

Glabella

autohide is deprecated. checkout the youtube iframe API site. – Sandpaper

Answer 7

It would be Better if you can use html5 video player or any other player (but not jwplayer) which can play youtube source video.

Below is an example source url of a video: https://redirector.googlevideo.com/videoplayback?requiressl=yes&id=a1385c04a9ecb45b&itag=22&source=picasa&cmo=secure_transport%3Dyes&ip=0.0.0.0&ipbits=0&expire=1440066674&sparams=requiressl%2Cid%2Citag%2Csource%2Cip%2Cipbits%2Cexpire&signature=86FE7D007A1DC990288890ED4EC7AA2D31A2ABF2.A0A23B872725261C457B67FD4757F3EB856AEE0E&key=lh1

Open this using simple html5 video player (Replace XXXXXX with source url or any downloadable url) :

    <video width="640" height="480" autoplay controls>
  <source src="XXXXXX" type="video/mp4">
 </video>

You can also use many other video players also.

Zoochore

Answer 8

 autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&modestbranding=1&controls=2&showinfo=1    

That worked for me, it still showed subscribe and it showed share link, but no youtube button to take them off the page to another. So that's the line I will use that I think will keep traffic my site and not take off to all the other sites.

Madelon

Answer 9

That watermark in the bottom right only appears on mouseover. There's no parameter to remove that, however if you stack a transparent div on top of the video and make it a higher z-index and the same size of the video, your mouseover will not trigger the watermark because your mouse will be hitting the div.

Of course the tradeoff for this is that you lose the ability to actually click on the video to pause it. But if you want to leave the ability to pause it, you could display the controls and have the top layer div cover up until the bottom 30 pixels or so, letting you click the controls.

Wellfed

Also it works if we set pointer-events to none on the YouTube iframe. – Tryparsamide

Answer 10

If, like me, you would just prefer people didn't click out to youtube using the logo, one option is to use a player like jwplayer. Using jwplayer the logo is still there just unclickable.

Glycerite

Answer 11

I tried this, but it is not possible to remove "Watch on YouTube" icon. Following solution of mine does not remove the icon itself but "blocks" the mouse hover so that watch on YouTube is not click-able. I added a div over icon, so no mouseover will be affected for that logo.

 <div class="holder">
     <div class="frame" id="player" style="height 350"></div>
     <div class="bar" id="bottom-layer">.</div>
 </div>

Where frame is my embedded player. include following to your css file

.holder{
position:relative;
width:640px;
height:350px;
}

.frame{
width: 100%;
height:100%;
}

.bar{
position:absolute;
bottom:0;
right:0;
width:100%;
height:40px;
}

This is not full solution but helps you if you are bothered with users' getting full youtube url.

Vinegarish

Answer 12

The only way to remove the YouTube branding (while keeping the video clickable) is to place the embed iFrame inside a container that has overflow set to hidden and has a slightly smaller height than the iFrame.

Of course this means the bottom of your video gets chopped off.

Also, you will be most likely breaching YouTube's Terms of Service.

CSS:

.videoWrapper {
  width: 550px;
  height: 250px;
  overflow: hidden;
}

HTML:

<div class="videoWrapper">
  <iframe width="550" height="314" src="https://www.youtube.com/embed/vidid?modestbranding=1&amp;rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

Scamper