Playing HTML5 video in fullscreen onClick of an image

Question

I have created a simple bootstrap grid which contains 9 images. Now onclicking a particular image, it should play a video in Fullscreen.

Methods which I tried

<div class="col-sm-4">   
 <a href="Videos/v6.mp4"  ><img src="images/img1.jpg"   class="img-responsive" style="width:100%" alt="Image"></a>
</div>

But the drawback of the above method is, in some browsers onclicking the image it tries to download the complete video file.

When tried embedding a video using <video>tag along with Fullscreen video API ( On MDN ), onclick of the video poster, it plays the video in that specific thumbnail size and doesn't go fullscreen.

Method I tried to implement the above is

HTML

     <video controls src="Videos/abc.mp4" poster="/images/abc.png" width="640" height="360" id="myvideo">

JS

  var videoElement = document.getElementById("myvideo");
function toggleFullScreen() {
if (!document.mozFullScreen && !document.webkitFullScreen) {
  if (videoElement.mozRequestFullScreen) {
    videoElement.mozRequestFullScreen();
  } else {
    videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
  }
} else {
  if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else {
    document.webkitCancelFullScreen();
  }
}}document.addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
  toggleFullScreen();
}}, false);

CSS

  <style type="text/css">
/* make the video stretch to fill the screen in WebKit */
:-webkit-full-screen #myvideo {
  width: 100%;
  height: 100%;
}

The above method too doesnt work.

Please help me, Thank you

instead of clicking images, why not add a poster to the video and click that instead. The the video plays...this should help you toggle the video in full screen, its already been answered here http://stackoverflow.com/questions/11171781/full-screen-video-toggle-html — Mueyiwa Moses Ikomi, Aug 21 '16 at 13:44

score 1 · Answer 1 · answered Aug 21 '16 at 14:18

Try that in HTML5:

<video poster="placeholder.jpg" id="backgroundvid"> 
<source src="video.webm" type='video/webm; codecs="vp8.0, vorbis"'> 
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'> 
<source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'> 
<p>Fallback content to cover incompatibility issues</p> </video>

To make the video full screen use the following CSS:

video#backgroundvid {  
   position: fixed; right: 0; 
   bottom: 0; 
   min-width: 100%; 
   min-height: 100%; 
   width: auto; 
   height: auto; 
   z-index: -100; 
   background: url(polina.jpg) no-repeat; background-size: cover;  
}

Playing HTML5 video in fullscreen onClick of an image

1 Answers1