Incompatibility of Bootstrap3 with JPlayer Circle Player

Question

I'm trying to get JPlayer's nice looking Circle Player: http://jplayer.org/latest/demos/ to work with Bootstrap3. It works with Bootstrap 2.3. There appears to be an incompatibility. It sure would be great if anyone knows how to fix it, or could find it. I think that this will probably affect others as well. I haven't been able to find a solution online.

Here are some details: 1. Circle player works correctly when bootstrap is not loaded. 2. Circle player works correctly when the following is included: //netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css 3. Circle player does not display properly when the following is included: //netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css

Circle Player itself includes the following libraries: jquery.transform2d.js, jquery.grab.js, mod.csstransforms.min.js, circle.player.js

Using the following Bootstrap 3 theme: https://wrapbootstrap.com/theme/3-in-1-admin-front-end-e-commerce-WB0G69690

Answer 1

I just ran into this, and found that it's because Bootstrap 3 applies "box-style: border-box" with the universal selector * (See the Release Notes). Just apply "box-sizing: content-box;" to .cpContainer and it will look as expected.