1

Bootstrap スタイルのサイトで JW Player を使用しており、ツールチップのサムネイルには .vtt ファイルが使用されています。JW Player がサムネイルの後ろに灰色の背景の丸い長方形を表示することを除いて、すべてがうまく機能します。ブートストラップ スタイルでは、サムネイルの背後の灰色の背景が狭すぎるため、サムネイルが右側の背景の上に張り付いてしまいます。Bootstrap 3 が "box-style: border-box" をユニバーサル セレクター *. Box-sizing を Bootstrap の代わりに content-box に変更すると (以下のコードのコメントを参照)、サムネイルの背景が修正されますが、もちろん、サイトの残りの部分が台無しになります。プレイヤーだけをターゲットにする方法があるかもしれませんが、わかりません。どんな助けでも感謝します。

<!-- 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>
4

1 に答える 1