Question

我在Bootstrap风格的网站上使用JW Player，工具提示使用.vtt文件。除了JW播放器在缩略图后面显示灰色背景圆角矩形外，一切正常。引导样式使缩略图后面的灰色背景太窄，使缩略图粘在右侧的背景上。我相信它可能与Bootstrap 3适用的事实有关＃box; style-border-box＆＃34;使用通用选择器*。如果我将box-sizing更改为content-box而不是Bootstrap所做的（请参阅下面的代码中的注释），它会修复缩略图背景 - 但当然它会弄乱网站的其余部分。也许有一种方法只针对玩家，但我无法弄明白。任何帮助表示赞赏。

<!-- here is the basic hosted Bootstrap code -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!--  NOTE if you uncomment this box-sizing immediately below, the problem goes away....
      .... BUT it messes up all of the other Bootstrap styles in the application -->
<!--
<style>
* {
  -webkit-box-sizing: content-box-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
</style>
-->

<script src="http://jwpsrv.com/library/5V3tOP97EeK2SxIxOUCPzg.js"></script>

<div id="container">&nbsp;</div>
<script type="text/javascript">
jwplayer("container").setup({
    height: 540,
    width: 1280,
    file: 'http://content.jwplatform.com/videos/vM7nH0Kl-640.mp4',
    image: 'http://content.jwplatform.com/thumbs/vM7nH0Kl-640.jpg',
    tracks: [{
      file: 'http://content.jwplatform.com/strips/vM7nH0Kl-120.vtt',
      kind: 'thumbnails'
    }]
});
</script>

Answer 1

看起来可以通过将以下内容添加到您的网站来修复：

<style>
.jwoverlay {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
</style>

JW Player VTT缩略图背景被Bootstrap 3搞砸了

1 个答案: