How to remove youtube branding after embedding video in web page

Question

I am using    lt iframe width  550  height  314  src  https   www youtube com embed vidid modestbranding 1 amp amp rel 0 amp amp showinfo 0  frameborder  0  allowfullscreen gt  lt  iframe gt    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 amp  showinfo 0 amp  autohide 1 amp  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

User · Answer

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>

User · Answer

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 amp id a1385c04a9ecb45b amp itag 22 amp source picasa amp cmo secure transport 3Dyes amp ip 0 0 0 0 amp ipbits 0 amp expire 1440066674 amp sparams requiressl 2Cid 2Citag 2Csource 2Cip 2Cipbits 2Cexpire amp signature 86FE7D007A1DC990288890ED4EC7AA2D31A2ABF2 A0A23B872725261C457B67FD4757F3EB856AEE0E amp key lh1  Open this using simple html5 video player  Replace XXXXXX with source url or any downloadable url          lt video width  640  height  480  autoplay controls gt     lt source src  XXXXXX  type  video mp4  gt    lt  video gt    You can also use many other video players also

User · Answer

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  amp 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   lt iframe width  500  height  294  src  https   www youtube com embed YykjpeuMNEk  amp theme dark amp autohide 2 amp modestbranding 1 frameborder  0  gt  lt  iframe gt      2 Now try to hide topbar   lt iframe width  500  height  294  src  https   www youtube com embed YykjpeuMNEk  amp theme dark amp autohide 2 amp showinfo 0 frameborder  0  gt  lt  iframe gt         But Now When We try to hide Both Information See the Limitation   lt iframe width  500  height  294  src  https   www youtube com embed YykjpeuMNEk  amp theme dark amp autohide 2 amp modestbranding 1 amp showinfo 0 frameborder  0  gt  lt  iframe gt

User · Answer

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     lt div class  holder  gt        lt div class  frame  id  player  style  height 350  gt  lt  div gt        lt div class  bar  id  bottom-layer  gt   lt  div gt    lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   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  Make iframe higher than real video height  In iframe parameters set height   width   1 7  or other multiplicator  Hide youtube s info under your header and footer with an absolute position at 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  In my case I use JS to destroy iframe after video is finished so user couldn t see youtube s offer with another videos Also important note  since iOS 12 2 is replacing Youtube s player by their own  width and height calculation should be done in constructor in case of React  because iOS player arrival cause page resize - possible width amp 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

User · Answer

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

User · Answer

autoplay 1 amp autohide 2 amp border 0 amp wmode opaque amp enablejsapi 1 amp modestbranding 1 amp controls 2 amp 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

User · Answer

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    lt iframe width  560  height  315  src  https   www youtube com embed Z6ytvzNlmRo rel 0 amp amp controls 1 amp amp amp amp showinfo 0 amp amp modestbranding 1  frameborder  0  gt  lt  iframe gt   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    lt iframe width  560  height  315  src  https   www youtube com embed Z6ytvzNlmRo rel 0 amp amp controls 1 amp amp amp amp showinfo 0 amp amp modestbranding 0  frameborder  0  gt  lt  iframe gt   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    lt iframe width  560  height  315  src  https   www youtube com embed Z6ytvzNlmRo rel 0 amp amp controls 0 amp amp amp amp showinfo 0 amp amp modestbranding 1  frameborder  0  gt  lt  iframe gt

User · Answer

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    I guess YouTube don t want you to do this otherwise they would allow that at their front end  Some brands spending huge efforts to provide the media not for a 5 min  removal  It s good to have the logo and respects brands rights  You still have the video and the luxury of embedding it in your site blog  Spare some of your time  that is not possible  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    amp showinfo 0   Turn off Title  amp  Ratings   amp showsearch 0   Turn off Search   amp rel 1   Turn on Related Videos   amp iv load policy 3   Turn off Annotations   amp cc load policy 1   Force Closed Captions   amp autoplay 1   Turn on AutoPlay  not recommended    amp loop 1   Loop Playback   amp 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

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

Examples related to javascript

Examples related to html

Examples related to youtube-iframe-api