如何解决带有视频背景的 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 举报,一经查实,本站将立刻删除。