'Possible to disable "Watch on Youtube" link?

I am building an app where I am embedding videos and specific sections of video clips. For example, it looks like this

<iframe width="640" height="360" src="https://www.youtube.com/embed/pftnJbQjSBA&modestbranding=1&showinfo=0&autoplay=1&controls=0&modestbranding=1&disablekb=1&rel=0&start=10&end=20" frameborder="0"></iframe>

Is it possible to disable "Watch on youtube" link so the user doesn't end up navigating elsewhere. Just to be clear, I only want to control the flow while the video is being watched (i.e not trying to interfere with ads or YouTube logo).

youtube-api

Solution 1:^[1]

It is possible, just add &modestbranding=1 to your embed code.

Watch this: https://www.youtube.com/watch?v=4NFgV_Et9gY

e.g.

<object width="800" height="450" data="http://www.youtube.com/v/@Model.YoutubeId&rel=0&modestbranding=1"></object>

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.

Learn more about YouTube's iFrame Player API.

Solution 2:^[2]

I found a working solution with no drawbacks:

<iframe
        width="640"
        height="390"
        src="https://www.youtube.com/embed/VgC4b9K-gYU"
        sandbox="allow-forms allow-scripts allow-pointer-lock allow-same-origin allow-top-navigation">
</iframe>

the key is the sandbox attribute. You just need to restrict popups and now the video just stops when you click on the youtube logo.

Solution 3:^[3]

It is not possible to remove Watch on Youtube link on control bar. But after you hiding control bar using controls=0 you can use modestbranding=1 to remove the Youtube watermark and link on bottom right corner.

But still you have a link with the video title on the top of the video. Might be in auto hide state. If you want to remove that use showinfo=0. But after doing this the Youtube watermark and link on the bottom right corner will appear.

Solution 4:^[4]

<div style="height:400px; width:400px; overflow: hidden;">
<iframe width="400px"    src="https://www.youtube.com/embed/ziEtst55R4s?theme=dark&autoplay=1&autohide=0&cc_load_policy=1&modestbranding=1&fs=0&showinfo=0&rel=0&iv_load_policy=3&mute=0&loop=1"   style="height:400px;  background:#000000; bottom: 60px; position: relative;"  
sandbox="allow-forms allow-scripts allow-pointer-lock allow-same-origin allow-top-navigation">

</iframe>
</div>

working link of video user should be aware sandbox is optional in order to disable all links. I added sandbox code because in the link additional youtube links are disabled. The title is hidden in this example also preventing original title from being shown by overflow hidden div. https://shareallweb.com/discussions/index.php?media/john-parr-naughty-naughty-official-music-video.146/

Solution 5:^[5]

Using controls=0 you can disable the whole control bar. Using autohide=1 the control bar will automatically hide after the video starts.

I don't think there is an option to just disable the "Watch on YT" link. But you could disable the whole control bar and add the required control buttons yourself.

Solution 6:^[6]

You can't hide that link by default. However using flash parameters you can disable the link from navigating away. Use allownetworking="internal". But be aware that it will disable every link facilities of the player.

Tutorial and demo: http://www.techtweaker.com/disable-links-on-embedded-youtube-video-code-hack/

Solution 7:^[7]

working demo link

.container {
  position: relative;
  width: 500px;
 height: 500px;
}

.image {
  display: block;
  width: 100%;
  height: 60%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
 

}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: Red;
  font-size: 20px;
  position: absolute;
  bottom: 40%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
 pointer-events: none;

}

<div class="container">
 

  <iframe width="800" height="500"  src="https://www.youtube.com/embed/cRkaPdfjzEk?rel=0;&autoplay=0&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"  class="image"  allowfullscreen  style="border:0px solid red;"  >   </iframe>
  
  <div   class="overlay">
   
  </div>
  <div id="pig" style="background-color: opacity: 1; width: 100%;" class="text">  Click here to play</div>
  
</div>

Its basically adding an image overlay while still keeping the control panel at the bottom.

   <style>
  .container {
    position: relative;
  width: 500px;
  height: 500px;
   }

 .image {
   display: block;
   width: 100%;
  height: 60%;
  }

   .overlay {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
  right: 0;
  height: 50%;
  width: 100%;
   opacity: 0;
   transition: .5s ease;


 }

 .container:hover .overlay {
  opacity: 1;
 }

 .text {
 color: Red;
 font-size: 20px;
  position: absolute;
 bottom: 40%;
 left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 text-align: center;
 pointer-events: none;

}
 </style>

  <div class="container">


  <iframe width="800" height="500"  src="https://www.youtube.com/embed/cRkaPdfjzEk? 
 rel=0;&autoplay=0&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted- 
  media; gyroscope; picture-in-picture"  class="image"  allowfullscreen  
 style="border:0px solid red;"  >   </iframe>

  <div   class="overlay">

  </div>
  <div id="pig" style="background-color: opacity: 1; width: 100%;" class="text">  Click 
 here to play</div>

   </div>

Solution 8:^[8]

So far, I tried a few combinations. I found a way to hide all the links to YouTube, and the Share link.

You might want to play around with the width and height values, to suit your video. But if you change them, you'll have to check for the links around the edges, because if you are off a little, the Share link might be clickable for 1px at the edge or something.

<div style="height:351px; width:625px; overflow: hidden;">
  <iframe height="351" width="625"
    src="https://www.youtube.com/embed/XXXXXXXX?theme=dark&autoplay=1&keyboard=1&autohide=2&cc_load_policy=1&modestbranding=1&fs=0&showinfo=0&rel=0&iv_load_policy=3&mute=0&loop=0"
    sandbox="allow-forms allow-scripts allow-pointer-lock allow-same-origin allow-top-navigation"
    style="height:471px; background:#000000; bottom: 61px; position: relative;"
    frameborder="0">
  </iframe>
</div>

I used the Youtube Embed Code Generator, and combined that with the code here: How To Disable YouTube Title Links From Embedded Videos.

The sandbox attribute prevents clicking the YouTube links from working.
Using autoplay=1 in the URL prevents the "Watch on YouTube" link from showing.
- If you don't actually want the video to autoplay, JS can be added that stops the video playback after it loads. Something like this Disable HTML5 autoplay browser extension. This worked to both hide the link and stop autoplay.
The style attribute hides the "top bar" links/channel and Share buttons. If you don't care about that, you don't need it. Clicking the Share buttons can provide a way for users to navigate elsewhere, though.
The style attribute also, in this example, hides the controls at the bottom. To show the controls, use style="height:400px; instead. However, this will leave a black bar along the bottom of the video, and cut off the top of the video.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Tessa
Solution 2	Stephen Rauch
Solution 3	AmilaDG
Solution 4
Solution 5	dirkk
Solution 6	AGMG
Solution 7
Solution 8

'Possible to disable "Watch on Youtube" link?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]