CODEWITHSUNDEEP
javascripthtmlcsshtml5-videohtml5-fullscreen
galbis
galbis

Reputation: 31

Playing HTML5 video in fullscreen onClick of an image

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

Upvotes: 3

Views: 3092

Answers (1)

Tom el Safadi
Tom el Safadi

Reputation: 6796

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;  
}

Upvotes: 1

Related Questions