css - 我的VideoJS播放器搞砸了

我是新手，通过互联网学习CSS和HTML，我将托管一个卡通网站，但事实是对wordpress一点儿也不了解。

这是我的问题

http://i.stack.imgur.com/qVaYv.jpg

http://i.stack.imgur.com/vouqa.png

您可以看到我的播放器在我启动和idk时搞砸了，为什么代码在这里

<video id="video" class="video-js" width="1000" height="500" controls preload="auto" poster="https://i.ytimg.com/vi/MmeAPpEoGAI/maxresdefault.jpg" controls data-setup='{}'>
   <source src="https://lh3.googleusercontent.com/vvT0ZbARuW8E17sX9MbpbFJ81fe_p_TlzSPSWwn3bVVXzPeN6bMsW3h0YsUaAsoxyw5dGkKAHBw=m18" type='video/mp4' label='360p' />
   <source src="https://lh3.googleusercontent.com/vvT0ZbARuW8E17sX9MbpbFJ81fe_p_TlzSPSWwn3bVVXzPeN6bMsW3h0YsUaAsoxyw5dGkKAHBw=m22" type='video/mp4' label='720p'/>
   <source src="https://lh3.googleusercontent.com/vvT0ZbARuW8E17sX9MbpbFJ81fe_p_TlzSPSWwn3bVVXzPeN6bMsW3h0YsUaAsoxyw5dGkKAHBw=m37" type='video/mp4' label='1080p'/>
</video>
<script>
  videojs('video').videoJsResolutionSwitcher()
</script>

顺便说一句，我以正确的方式添加videoJS吗？ [我将此添加到主题的header.php中]

<head>
<link href="http://vjs.zencdn.net/5.10.4/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/5.10.4/video.js"></script>
<link href="http://127.0.0.1/videojs-resolution-switcher.css" rel="stylesheet">
<script src="http://127.0.0.1/videojs-resolution-switcher.js"></script>

播放器通过videojs.com的展示效果很好

最佳答案

尝试更改样式表顺序

将videojs样式<link href="http://vjs.zencdn.net/5.10.4/video-js.css" rel="stylesheet">文件放在样式表队列的末尾（<head>部分中的最后一个）

看来您的模板样式会覆盖videojs样式

关于css - 我的VideoJS播放器搞砸了，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38018818/

VIDEOjs

css - 我的VideoJS播放器搞砸了