Javascript 点击图像全屏播放HTML5视频

我创建了一个简单的引导网格，其中包含9个图像。现在，一旦点击一个特定的图像，它应该全屏播放视频

我尝试过的方法

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

CSS

/*在WebKit中拉伸视频以填充屏幕*/
：-webkit全屏#我的视频{
宽度：100%；
身高：100%；
}

上述方法也不起作用

请帮助我，谢谢你

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

---

与其点击图片，不如在视频中添加海报，然后点击。视频播放…这应该有助于您切换全屏视频，这里已经回答了

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

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

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

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