<div class="video">
  <video id="ten_video" width="100%" height="100%" x-webkit-airplay="true" webkit-playsinline="true" preload="auto" src="http://121.14.123.11/vhot2.qqvideo.tc.qq.com/i01579n5ikw.mp4?vkey=B4D915AA268D5B24697668EAB4B26666718E0AC27064D83319FFAF2BF236AD97A8A000358544BA915F64681BEBA4B6472831AF898016585FE58ED15A1BBBB92DD1071EA114D19FF04FDE702F57C2269429357F82EFA35F51&amp;br=60&amp;platform=2&amp;fmt=mp4&amp;level=10&amp;sdtfrom=v5010"></video>
</div>
<div class="box">
		  Hello Live Blur!
	</div>
<div class="btn">Play video</div>

<script>
var video = document.querySelector('#ten_video');
	document.querySelector('.btn').onclick = function(){
      if( video.paused){
        video.play()
      }else{
        video.pause()
      }
	}
</script>
body{
    height: 800px;
		background: url(http://i.gtimg.cn/qqlive/images/20150730/1.jpg) 0 0 no-repeat ;
		-webkit-background-size: cover;
		background-size: cover;
		font-family: sans-serif;
	}
.box{
  position: fixed;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 100px;
  line-height: 100px;
  font-size: 20px;
  margin: auto;
  text-align: center;
  color: #fff;
  -webkit-transform: translate(-50%,-50%);
  -webkit-backdrop-filter: blur(10px);
}
.video{
  position: fixed;
  z-index: 1;
  width: 320px;
  height: 249px;
  top: 50%;
	left: 50%;
  -webkit-transform: translate(-50%,-50%);
}
.btn{
		position: fixed;
    z-index: 5;
		bottom: 10px;
		left: 50%;
		margin-left: -90px;
		width: 180px;
		height: 30px;
		line-height: 30px;
		border-radius: 15px;
		background-color: rgba(0, 0, 0, 0.7);
		color: #fff;
		text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.