23

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

8 Answers 8

14

[Still Works, but deprecated] 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.

5
  • 1
    This doesn't prevent linking to YouTube, it just changes where and how the link is displayed. What do I do if I don't want the viewer to be able to get to YouTube from this video?
    – DAE
    Commented Dec 15, 2016 at 6:10
  • It is not possible, this is the best you get. Commented Dec 15, 2016 at 10:07
  • modestbranding is this code still working in 2021? Commented Jun 3, 2021 at 7:50
  • Yes, it does. Here's a mouse-over i.imgur.com/ADGeGfY.png Commented Jun 3, 2021 at 11:31
  • 1
    Still works, but it just got deprecated so don't use it developers.google.com/youtube/…
    – Haim
    Commented Aug 20, 2023 at 8:19
12

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.

6
  • 1
    This is helpful; thanks. I wish there was a way to prevent the popups from even displaying, but this will work well enough.
    – rotarydial
    Commented May 20, 2018 at 4:08
  • 1
    an alternative method I switched to now is to get the direct link of the youtube video and play it with a html5 player
    – BlakkM9
    Commented Nov 18, 2018 at 15:21
  • @BlakkM9, can you elaborate? What player and how are you doing it? I didn't find any compatible that allows you change quality.
    – Storo
    Commented Sep 9, 2019 at 13:48
  • @Storo you need to implement that yourself. when reading out the direct urls from youtube there are different urls for every quality. sound is also seperated from the audio. i guess there are some players that can do this by default but i did this on my own.
    – BlakkM9
    Commented Sep 9, 2019 at 14:12
  • @BlakkM9, Ok. Got it. Do you have an example to see how you do it? Maybe a plunker or something like that?
    – Storo
    Commented Sep 9, 2019 at 14:26
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.

1

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

2
  • you just need to right-click the video and you get the "copy URL" option. So this doesn´t solve a lot..
    – Sturla
    Commented Jan 19, 2021 at 12:24
  • 1
    Copying the URL is not the same as navigating there. Anyone can find the URL of the video by looking at the HTML.
    – mbomb007
    Commented Feb 9, 2022 at 14:39
0

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.

5
  • Yes. I did have controls=0. Still the "Watch on YouTUbe" link shows up.
    – user428900
    Commented May 19, 2013 at 20:23
  • If I use youtube.com/embed/pftnJbQjSBA?controls=0 I don't see the controlbar.
    – dirkk
    Commented May 19, 2013 at 20:36
  • But if you embed as an iframe inside the webpage, on the lower right there is a link/pop-up that says "Watch on YouTube"
    – user428900
    Commented May 21, 2013 at 0:20
  • do you have a solution for this one? Commented Sep 17, 2019 at 16:18
  • Set autoplay=1, then the "Watch on YouTube" link will not show.
    – mbomb007
    Commented Feb 9, 2022 at 15:19
0

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

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

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/

Not the answer you're looking for? Browse other questions tagged or ask your own question.