video自动撑满父级元素

最近有个需求，将视频充满，并可以随父元素缩放

先说说试过哪些方法：
  1：css3：object-fit: fill;（可惜ie不支持）
  2：使用css控制，借鉴的其他大神的，但是对于我，竟然一点都不好使，忧伤。实现如下代码可见：

/* 父元素 */
.videoWrap{
  position: relative;
  height: 0;
  width: 80%;
  padding-bottom: 45%;   //需要计算得到（ (video的高 / video的宽) * 父级的width ,使用的是百分比 ）
}
.videoWrap video{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

以上方式都无法实现

而我要实现的最终效果如下：

左侧昆虫为视频，而且视频大小不做控制

是通过canvas定时画图实现的

<div class="position-relative w-100 h-100" ref="videoWrap">
                <video id="video" ref="video"
                    x5-playsinline="true" 
                    playsinline="true" 
                    webkit-playsinline="true" 
                    x5-video-player-type="h5" 
                    x5-video-player-fullscreen="true" 
                    :src="updataService + '/' + formdata.video.url" 
                    preload
                    autoplay
                    muted
                   class="position-absolute" 
                   style="right:0;top:0;z-index:-1;zoom:1;opacity:0;">
                </video>
                <canvas id="myCanvas" class="d-block w-100 h-100" ref="canvas">
                </canvas>
</div>

    var self = this;
    this.vm = new Vue({
                el: '#loginconfig',
                data: {
                    formdata: {
                        video: {
                            url: '25a39632de654947bcb4ec936f78489c',
                            name: 'mov.mp4'
                        }
                    },
                    updataService: 'http://11.11.180.217:6004'
                },
                computed: {}
                },
                mounted: function () {
                    this.$refs.video.controls = false;
                    var v = this.$refs.video;
                    var c = this.$refs.canvas;
                    var ctx = c.getContext('2d');
                    this.$refs.canvas.width = this.$refs.videoWrap.offsetWidth;
                    this.$refs.canvas.height = this.$refs.videoWrap.offsetHeight;
                    var cwidth = this.$refs.canvas.offsetWidth;
                    var cheight = this.$refs.canvas.offsetHeight;

                    // 初始化定时器
                    self.timer = null;
                    // 每0.02秒画一张图片
                    v.addEventListener('play', function () {
                        self.timer = window.setInterval(function () {
                            ctx.drawImage(v, 0, 0, cwidth, cheight);
                        }, 20);
                    }, false);
                    v.addEventListener('ended', function () {
                        clearInterval(self.timer);
                    }, false);
                },
                methods: {}，
                ,
                destroyed: function () {
                    clearInterval(self.timer);
                }
   });