How to hide the URL when hover over a link?

Question

Would it be possible for when I hover over the image the href won't display the link to the raw video? (bottom left of web browser)?

Also, how can I disable right click so they won't get the video options.

<article>
  <a class="thumbnail" href="http://vjs.zencdn.net/v/oceans.mp4">
    <img src="http://i.livescience.com/images/i/000/026/853/iFF/ocean-waves-beach.jpg?1336055104" alt="" />
  </a>
</article>

Since no video tags are being used, I'm not to sure about this.

My idea was maybe the href would toggle a javascript function. The function would pretty much do the same thing. store the raw link in a variable.

Look for http://stackoverflow.com/a/9851396/1980659 – ForguesR Jan 06 '16 at 01:39 — ForguesR, Jan 06 '16 at 01:39

Stickers · Accepted Answer · 2016-01-06T13:50:33.557

With CSS only, you can set up a layer on top of the link. Below is an example of using pseudo element :before + some position tricks.

article {
  position: relative;
  display: block;
}
article:before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 1;
}

<article>
  <a class="thumbnail" href="http://vjs.zencdn.net/v/oceans.mp4">
    <img src="http://i.livescience.com/images/i/000/026/853/iFF/ocean-waves-beach.jpg?1336055104" alt="" />
  </a>
</article>

With JavaScript, try the following approach.

<article>
  <a class="thumbnail" href="javascript:void(0)" onclick="javascript:location.href='http://vjs.zencdn.net/v/oceans.mp4'">
    <img src="http://i.livescience.com/images/i/000/026/853/iFF/ocean-waves-beach.jpg?1336055104" alt="" />
  </a>
</article>

Philip Feldmann · Answer 2 · 2016-01-06T01:56:02.680

1

You can disable rightclick by adding oncontextmenu="return false" to your video.

<video controls="" autoplay="" name="media" oncontextmenu="return false"><source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" oncontextmenu="return false"></video>

edited Jan 06 '16 at 01:56

answered Jan 06 '16 at 01:50

Philip Feldmann

7,887
6
41
65

That disables it on the image. Not the video once it is in display. I need the right click disabled for the video. – L3SAN Jan 06 '16 at 01:54
Then simply add it to the video, which works as well ;) - added a new snippet. You can just as well add it to the entire body. This will prevent people from right-clicking anywhere and opening the inspect-menu. However, it'll always be possible to view the source code of your site. – Philip Feldmann Jan 06 '16 at 01:56

score 0 · Answer 3 · answered Jan 06 '16 at 02:12

Thank you all for your help. I obtained the solution.

href set it to hash:

href="#"

Add an onclick attribute that runs a JS function:

Onclick="video()"

For the function add this:

Function video() {
   window.location.href ='VIDEO LINK HERE';
}

To disable the videos right click menu. All i did was add this to the body tag:

oncontextmenu="return false;"

Luckily for me, I can disable the whole pages right click. Since i have no video tag i can't use it on the video tag.

How to hide the URL when hover over a link?

3 Answers3