Adding a HTML5 href link to a video tag

Question

I'm trying to add a href link to a video so when you click the video it directs you to another HTML page. apparently, it can only be done with jquery one blog said but not sure.

<video class="tutorial_vid" width="220" height="140" autoplay="autoplay" loop> //EDIT: loop="true" is deprecated nowadays
  <source src="vid/Rolling_Ice_x264.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

Code so far. Any help would be greatly appreciated. Thanks in advance.

Answer 1

I would think that if you want to click on something to navigate to another page, you actually need a anchor () link. You can ofcourse style the link so it looks like a video (using an image or something).

If that's not what you want, I think you can always surround the videotag with a link:

<a href="yourpage.html">
   <video class="tutorial_vid" width="220" height="140" autoplay="autoplay" loop> 
      //EDIT: loop="true" is deprecated nowadays 
      <source src="vid/Rolling_Ice_x264.mp4" type="video/mp4" /> 
      <source src="movie.ogg" type="video/ogg" />
   </video>
</a>

Answer 2

Fiddle

jQuery // You can use jQuery to add a simple click based redirect

$('.tutorial_vid').click(function(){
    window.location = 'http://google.com';
});

CSS // Use CSS to make it appear clickable on mouse hover

.tutorial_vid {
    cursor: pointer;
}

If you still want a href solution, this jQuery method should add the attribute.

$('.tutorial_vid2').attr('href', 'http://google.com');

Hope this helps!!

Answer 3

In Firefox links seem to only cover one character's height at the bottom of videos and pictures, so my solution (which requires JavaScript) is:

<div onclick="window.location.href = 'https://www.example.com/videos-page'">
    <video src="video.mp4" style="max-width:100%"></video>
</div>

You can see why below (if you are in FF or in any other browser that does so) by clicking anywhere in the videos and then at the bottom of each video:

 <div>This is the video in a link: <a href="https://www.example.com/videos-page"> <video src="https://www.lampe2020.de/videos/00f/video.mp4" controls style="max-width:100%;pointer-events:none;"></video> </a> </div> <div>This is the video with the faked link: <div onclick="window.location.href = 'https://www.example.com/videos-page';" style="cursor:pointer;"> <video src="https://www.lampe2020.de/videos/00f/video.mp4" controls style="max-width:100%;pointer-events:none;"></video> </div> </div> <,-- The video above is a random video from my own website. lampe2020,de. the person in the video is me. -->

Note that this behaviour is only important if you set the video's pointer-events to none (in the style attribute). But I would recommend to do this because this stops the user from activating the video controls.