设置video适配所有的屏幕大小，滚动事件添加动画

一。视频video容器的大小，随着屏幕大小的变化，完美的显示效果。  

1.css

   .videoBox{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: none;
  background: rgba(0,0,0,.8);
  z-index: 30;
}
 .videoControl{
  /*width: 80%;*/
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
   z-index: 10;
}
 .deleteIcon{
   position: absolute;
   top: 0;
   right: 0;
   width: 32px;
   height: 32px;
   z-index: 10;
   transition: all 1s;
 }
.deleteIcon:hover{
  transform: rotate(360deg);

}

2.html

  <div class="videoBox">
    <div class="videoControl">
      <video class="videoControl"
     src="http://consumer.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/pdp/phones/maters/PD_90_v12_911_2.mp4"
             controls="controls"></video>
      <img class="deleteIcon" src="./common/images/x3_pro/deleteIcon.png" alt="图片">
    </div>

  </div>

3.javascript 

var w = document.documentElement.clientWidth || document.body.clientWidth,

          h = document.documentElement.clientHeight || document.body.clientHeight,

           $videoControl = $('.videoControl');

var videoW = (h * 0.9 * 16 / 9).toFixed(2),

        videoH = (w * 0.9 * 9 / 16).toFixed(2);
        if (w - videoW > 0 && h-videoH >0) {
            $videoControl.width(videoW);
            $videoControl.height((videoW * 9 / 16).toFixed(2));
        } else if (w - videoW > 0 && h - videoH < 0) {
            $videoControl.width(videoW);
            $videoControl.height((videoW * 9 / 16).toFixed(2));


        }else if(w - videoW < 0 && h - videoH > 0){
            $videoControl.height(videoH);
            $videoControl.width((videoH * 16 / 9).toFixed(2));

        }

二.监听页面滚动事件，实现动画效果。

     $(window).scroll(function () {
            b = $(this).scrollTop();
            $(".ddpai_ctn").each(function () {
                c = $(this).offset().top;
                if (a + b > c + h / 2) {
                    $(this).addClass("move");
                }
                else {
                    $(this).removeClass("move");
                }
            });

        });

        $(".ddpai_shop_13 .playIcon").on("click", function () {
            $(".videoBox").addClass('db');
        });
        $(".videoBox .deleteIcon").on("click", function () {
            $(".videoBox").removeClass('db');
            playPause();
        });
    }

    function playPause() { //暂停或者播放
        var myVideo = document.getElementsByTagName('video')[0];
        if (myVideo.paused) {
            myVideo.play();
        }
        else {
            myVideo.pause();
        }
    }