带有视频背景的 SlideToggle 封面，但视频宽度被切断

问题描述

这里是初学者编码器！我已经成功地用视频编码了一个滑动切换盖......但在加载时视频似乎被切断了。

我尝试使用 object-fit:cover 和许多其他功能，但似乎没有任何效果。唯一的解决方案是为视频添加 100% 的宽度，但它不再使 div 成为封面，您可以开始查看我的其余代码。

$('.ballout').click(function() {
  $('.cover').slidetoggle();
  $('body').css({
    'overflow': 'scroll'
  });
});


$('.title').animate({
  'left': '0'
},3000);

$('.author').animate({
  'right': '0'
},3000);

$('.ballout').effect("bounce",{
  times: 12,distance: 100
},5500);

.cover {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 3;
}

.title {
  position: absolute;
  top: 6%;
  left: -100%;
  width: 75%;
  text-align: center;
  color: white;
  font-family: 'TimesNewRoman';
  font-weight: bolder;
}

.author {
  position: absolute;
  top: 40%;
  right: -100%;
  width: 50%;
  text-align: center;
  color: white;
  font-family: 'TimesNewRoman';
  font-weight: bolder;
  margin: auto;
}

.author h3 {
  background-color: rgba(0,100,.6);
  font-size: 1.5em;
  width: 50%;
}

<div class="cover">
  <video autoplay muted loop id="myVideo">
            <source src="media/golfcover.mp4">
      </video>

  <div class="title">
    <h1>The "COVID Effect" on Golf</h1>
  </div>

  <div class="author">
    <h3>By: Isabel Castillo</h3>
  </div>

  <div class="ballout">
    <img src="img/ball.png">
  </div>
  <!--ball end div -->
</div>
<!--cover end div -->

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）