如何解决如何仅在视频可见且全宽时再现视频？
我的意思是，我需要在我的网站上放一个视频，它只能在可见时播放，因为视频位于页面中间，我不想在用户位于顶部时播放。我还希望它以全宽播放，以便覆盖整个屏幕。这是我的问题。我设法分开做，但不知道为什么我不能同时做。代码如下：
在可见时播放：
<!DOCTYPE html>
<html>
<head>
<title>Video1</title>
<style>
video{
max-width: 100%;
}
</style>
</head>
<body>
<video width= auto>
<source src="https://www.youtube.com/embed/L7OLY4HCctQ" type='video/mp4' />
</video>
<script>
let options = {
rootMargin: '0px',threshold: 1.0
}
var ob = new IntersectionObserver((entries,observer) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
entry.target.pause();
} else {
entry.target.play();
}
});
},options);
document.querySelectorAll('video').forEach((item) => {
ob.observe(item);
});
</script>
</body>
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
<style>
/* Hide the video on mobile */
.video-container {
display: none;
pointer-events: none;
}
/* At everything bigger than mobile,make .video-container fill its parent */
@media (min-width: 768px) {
.video.full-width {
height: 450px;
}
.video-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.video-container > iframe {
flex: 0 0 auto;
max-width: none;
}
}
</style>
<body>
<div class="video full-width">
<div class="video-container">
<iframe src="https://www.youtube.com/embed/L7OLY4HCctQ" type='video/mp4' "></iframe>
</div>
</div>
</body>
如果“在可见时播放基本上是javascript，而“播放全宽”基本上是css，为什么我不能将它们组合起来？
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。