Style wont apply until refresh HTML

I have an issue with trying to customize the default Video-player. I’m using js/css from

In the header of my Index.html I have the following code:

<link type="text/css" target="_blank" rel="nofollow" href="CSS/video-js-6.2.7/video-js.css" rel="stylesheet">
<script src="CSS/video-js-6.2.7/video.js"></script>
<style type="text/css">
    .vjs-default-skin {
        color: #232a3a;

    .vjs-default-skin .vjs-play-progress,
    .vjs-default-skin .vjs-volume-level {
        background-color: #9cbaca

    .vjs-default-skin .vjs-control-bar,
    .vjs-default-skin .vjs-big-play-button {
        background: rgba(0,0,0,0.7)

    .vjs-default-skin .vjs-slider {
        background: rgba(0,0,0,0.2333333333333333)

    .vjs-default-skin .vjs-control-bar {
        font-size: 94%

When I load the page I get the browsers default styling, this stays until i press F5 and refreshes the site, then the new correct look shows up.

I’m guessing that the CSS is not fully loaded or something like that. It then works until I clear the cache, but I would really like it to work on the first load also.