Css 无法隐藏播放列表html视频

有了这个脚本，它工作得很好，问题是它显示了播放列表上的视频，我尝试了可见性：隐藏；和显示：无；它不起作用，有人知道如何隐藏它吗

var video\u player=document.getElementById（“video\u player”）；
video=video\u player.getElementsByTagName（“视频”）[0]，
video\u links=video\u player.getElementsByTagName（“figcaption”）[0]，
source=video.getElementsByTagName（“源”），
链接列表=[]，
维迪尔=”http://demosthenes.info/assets/videos/",
currentVid=0，
allLnks=视频链接。儿童，
lnkNum=所有Lnks.length；
视频。删除属性（“控件”）；
视频。删除属性（“海报”）；
（功能（）{
功能播放视频（索引）{
视频链接.children[index].classList.add（“currentvid”）；
source[1].src=vidDir+link_list[index]+“.webm”；
源[0]。src=vidDir+link_list[index]+“.mp4”；
currentVid=指数；
video.load（）；
video.play（）；
}
对于（变量i=0；i=lnkNum）{
nextVid=0
}否则{
nextVid=当前视频+1
}
playVid（nextVid）；
})
video.addEventListener（'mouseenter'，function（）{
setAttribute（“控件”、“真”）；
})
video.addEventListener（'mouseleave'，function（）{
视频。删除属性（“控件”）；
})
var indexOf=功能（指针）{
if（typeof Array.prototype.indexOf==='function'）{
indexOf=Array.prototype.indexOf；
}否则{
indexOf=功能（指针）{
变量i=-1，
指数=-1；
对于（i=0；i
视频播放器{
显示：表格；
线高：0；
最大宽度：100%；
保证金：0自动；
}
#视频容器{
位置：相对位置；
}
#影音播放组，
#视频播放器figcaption{
显示：表格单元格；
垂直对齐：顶部；
}
#集装箱视频{
位置：绝对位置；
显示：块；
宽度：100%；
身高：100%；
排名：0；
}
#视频播放器figcaption{
宽度：25%；
}
#视频播放器figcaption a{
显示：块；
}
#视频播放器figcaption a{
不透明度：.3；
过渡：1s不透明度；
}
#视频播放器在img上播放，
数字视频{
宽度：100%；
身高：100%；
}
#a.currentvid上的视频播放器，
#视频播放器figcaption a：悬停，
#视频播放器figcaption a：聚焦{
不透明度：1；
}

---

新帖子：要隐藏当前视频，请查看

视频播放器figcaption a.currentvid。。。答：焦点

。变化<代码>不透明度：1至<代码>不透明度：0，添加

可见性：隐藏（将隐藏该区域，但不会删除其占用的空间），或添加
显示：无（这是最好的解决方案）。如果希望播放列表显示在多个页面上，请确保每次都将
class=“currentvid”
放置在正确的
位置


旧帖子：需要添加
display:none或
显示：无！重要的至
#视频_容器
。问题是你可能会。要显示
：无工作正常，将
#video_container
移动到
#video_container video
下方。如果您希望所有内容都保持在原来的位置，请使用display:none！重要；`这将覆盖所有其他内容并隐藏您的视频

#video_container {
  position: relative;
  display: none !important;
}

好的，这个CSS应该适合你。所有重要的项目我都做了标记。但在我们讨论这个问题之前，让我们看看到底出了什么问题。这就是你所拥有的：

#video_container video {position: absolute; top: 0;}
#video_player figcaption {width: 25%;}

位置
及其
顶部
代码覆盖了隐藏播放列表的所有形式。即使
视频播放器figcaption
设置为
显示：无或<代码>可见性：隐藏
这对隐藏播放列表没有影响，因为
宽度：25%。宽度覆盖了
显示/可见性
，我们都知道
显示：无应该覆盖所有内容。但宽度仍然可见，因为
位置：绝对#video#u container video
的code>说：“我不管其他的话，你待在原地。”。这些事情已经解决了。下面是要使用的正确CSS

#video_player {display: table;
               margin: auto;
               background: #000000;
               width: 500px; /*The space you want occupied.*/
}

#video_container {position: relative;}

#video_player div, #video_player figcaption {display: table-cell; vertical-align: top;}

#video_container video {display: block;
                        width: 100%; /*How big you want the video to be.*/
                        height: ---; /*Whatever you want*/
                        /*width: 350px;*/ /*Use with visible playlist.*/
                        /*height: 100%;*/ /*Use with visible playlist.*/
}

#video_player figcaption {display: none; /*Hides the playlist from view.*/
}

#video_player figcaption a {display: block; opacity: .3; transition: 1s opacity;}
#video_player figcaption a img {width: 100%;}
#video_player figcaption a.currentvid, #video_player figcaption a:hover, #video_player figcaption a:focus {opacity: 1;}

尝试使用参数
！重要信息
。这就是问题所在，展位的可见性和显示都起作用，但是可见性会留下空白，而显示会隐藏所有内容。如果您使用可见性并希望删除空白，请将高度更改为0。若要仅隐藏视频：
#视频容器{显示：无！重要信息；}
但我不想隐藏我想隐藏的视频