Skin videojs

53446
,

Bonjour,

Voila je veux faire un skin genre youtube pour videoJs et j'ai téléchargé celui de videoJs SKin Generator. J'utilise VueJs avec Webpack.

Ce que je fais

<template>
  <video id="video" class="video-js vjs-default-skin" width="1000" controls data-setup='{}'>
    <source src="https://vjs.zencdn.net/v/oceans.mp4?sd" type='video/mp4' label='SD' res='480'/>
    <source src="https://vjs.zencdn.net/v/oceans.mp4?hd" type='video/mp4' label='HD' res='1080'/>
    <source src="https://vjs.zencdn.net/v/oceans.mp4?phone" type='video/mp4' label='phone' res='144'/>
    <source src="https://vjs.zencdn.net/v/oceans.mp4?4k" type='video/mp4' label='4k' res='2160'/>
    <slot></slot>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  <!-- <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px"
         controls preload="none" poster='http://video-js.zencoder.com/oceans-clip.jpg'
         data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
    <slot></slot>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
      </video> -->
</template>
<style>
  .video-js .vjs-menu-button-inline.vjs-slider-active, .video-js .vjs-menu-button-inline:focus, .video-js .vjs-menu-button-inline:hover, .video-js.vjs-no-flex .vjs-menu-button-inline {
    width: 10em
  }

  .video-js .vjs-controls-disabled .vjs-big-play-button {
    display: none !important
  }

  .video-js .vjs-control {
    width: 3em
  }

  .video-js .vjs-menu-button-inline:before {
    width: 1.5em
  }

  .vjs-menu-button-inline .vjs-menu {
    left: 3em
  }

  .video-js.vjs-paused .vjs-big-play-button, .vjs-paused.vjs-has-started.video-js .vjs-big-play-button {
    display: block
  }

  .video-js .vjs-load-progress div, .vjs-seeking .vjs-big-play-button, .vjs-waiting .vjs-big-play-button {
    display: none !important
  }

  .video-js .vjs-mouse-display:after, .video-js .vjs-play-progress:after {
    padding: 0 .4em .3em
  }

  .video-js.vjs-ended .vjs-loading-spinner {
    display: none
  }

  .video-js.vjs-ended .vjs-big-play-button {
    display: block !important
  }

  .video-js *, .video-js:after, .video-js:before {
    box-sizing: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit
  }

  .video-js.vjs-fullscreen, .video-js.vjs-fullscreen .vjs-tech {
    width: 100% !important;
    height: 100% !important
  }

  .video-js {
    font-size: 14px;
    overflow: hidden
  }

  .video-js .vjs-control {
    color: inherit
  }

  .video-js .vjs-menu-button-inline:hover, .video-js.vjs-no-flex .vjs-menu-button-inline {
    width: 8.35em
  }

  .video-js .vjs-volume-menu-button.vjs-volume-menu-button-horizontal:hover .vjs-menu .vjs-menu-content {
    height: 3em;
    width: 6.35em
  }

  .video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before {
    text-shadow: 0 0 1em #fff, 0 0 1em #fff, 0 0 1em #fff
  }

  .video-js .vjs-spacer, .video-js .vjs-time-control {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
  }

  .video-js .vjs-time-control {
    -webkit-box-flex: 0 1 auto;
    -moz-box-flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: auto
  }

  .video-js .vjs-time-control.vjs-time-divider {
    width: 14px
  }

  .video-js .vjs-time-control.vjs-time-divider div {
    width: 100%;
    text-align: center
  }

  .video-js .vjs-time-control.vjs-current-time {
    margin-left: 1em
  }

  .video-js .vjs-time-control .vjs-current-time-display, .video-js .vjs-time-control .vjs-duration-display {
    width: 100%
  }

  .video-js .vjs-time-control .vjs-current-time-display {
    text-align: right
  }

  .video-js .vjs-time-control .vjs-duration-display {
    text-align: left
  }

  .video-js .vjs-play-progress:before, .video-js .vjs-progress-control .vjs-play-progress:before, .video-js .vjs-remaining-time, .video-js .vjs-volume-level:after, .video-js .vjs-volume-level:before, .video-js.vjs-live .vjs-time-control.vjs-current-time, .video-js.vjs-live .vjs-time-control.vjs-duration, .video-js.vjs-live .vjs-time-control.vjs-time-divider, .video-js.vjs-no-flex .vjs-time-control.vjs-remaining-time {
    display: none
  }

  .video-js.vjs-no-flex .vjs-time-control {
    display: table-cell;
    width: 4em
  }

  .video-js .vjs-progress-control {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: .5em;
    top: -.5em
  }

  .video-js .vjs-progress-control .vjs-load-progress, .video-js .vjs-progress-control .vjs-play-progress, .video-js .vjs-progress-control .vjs-progress-holder {
    height: 100%
  }

  .video-js .vjs-progress-control .vjs-progress-holder {
    margin: 0
  }

  .video-js .vjs-progress-control:hover {
    height: 1.5em;
    top: -1.5em
  }

  .video-js .vjs-control-bar {
    -webkit-transition: -webkit-transform .1s ease 0s;
    -moz-transition: -moz-transform .1s ease 0s;
    -ms-transition: -ms-transform .1s ease 0s;
    -o-transition: -o-transform .1s ease 0s;
    transition: transform .1s ease 0s
  }

  .video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-control-bar, .video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-control-bar, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-control-bar, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar, .video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar {
    visibility: visible;
    opacity: 1;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateY(3em);
    -moz-transform: translateY(3em);
    -ms-transform: translateY(3em);
    -o-transform: translateY(3em);
    transform: translateY(3em);
    -webkit-transition: -webkit-transform 1s ease 0s;
    -moz-transition: -moz-transform 1s ease 0s;
    -ms-transition: -ms-transform 1s ease 0s;
    -o-transition: -o-transform 1s ease 0s;
    transition: transform 1s ease 0s
  }

  .video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-progress-control, .video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-progress-control {
    height: .25em;
    top: -.25em;
    pointer-events: none;
    -webkit-transition: height 1s, top 1s;
    -moz-transition: height 1s, top 1s;
    -ms-transition: height 1s, top 1s;
    -o-transition: height 1s, top 1s;
    transition: height 1s, top 1s
  }

  .video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active.vjs-fullscreen .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive.vjs-fullscreen .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active.vjs-fullscreen .vjs-progress-control, .video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive.vjs-fullscreen .vjs-progress-control, .video-js.vjs-has-started.vjs-playing.vjs-user-inactive.vjs-fullscreen .vjs-progress-control {
    opacity: 0;
    -webkit-transition: opacity 1s ease 1s;
    -moz-transition: opacity 1s ease 1s;
    -ms-transition: opacity 1s ease 1s;
    -o-transition: opacity 1s ease 1s;
    transition: opacity 1s ease 1s
  }

  .video-js.vjs-live .vjs-live-control {
    margin-left: 1em
  }

  .video-js .vjs-big-play-button {
    top: 50%;
    left: 50%;
    margin-left: -1em;
    width: 2em;
    border: none;
    color: #fff;
    -webkit-transition: border-color .4s, outline .4s, background-color .4s;
    -moz-transition: border-color .4s, outline .4s, background-color .4s;
    -ms-transition: border-color .4s, outline .4s, background-color .4s;
    -o-transition: border-color .4s, outline .4s, background-color .4s;
    transition: border-color .4s, outline .4s, background-color .4s;
    background-color: rgba(0, 0, 0, .5);
    font-size: 2.5em;
    border-radius: 20%;
    height: 1.4em !important;
    line-height: 1.4em !important;
    margin-top: -.7em !important
  }

  .video-js .vjs-menu-button-popup .vjs-menu {
    left: -3em
  }

  .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    background-color: transparent;
    width: 12em;
    left: -1.5em;
    padding-bottom: .5em
  }

  .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item, .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-title {
    background-color: #151b17;
    margin: .3em 0;
    padding: .5em;
    border-radius: .3em
  }

  .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected {
    background-color: #2483d5
  }

  .video-js .vjs-big-play-button:active, .video-js .vjs-big-play-button:focus, .video-js:hover .vjs-big-play-button {
    background-color: #cc181e
  }

  .video-js .vjs-loading-spinner {
    border-color: #cc181e
  }

  .video-js .vjs-control-bar2 {
    background-color: #000
  }

  .video-js .vjs-control-bar {
    background-color: rgba(0, 0, 0, .3) !important;
    color: #fff;
    font-size: 12px
  }

  .video-js .vjs-play-progress, .video-js .vjs-volume-level {
    background-color: #cc181e
  }

  .video-js .vjs-load-progress {
    background: rgba(255, 255, 255, .3)
  }
</style>
<script>
  import videojs from 'video.js'
  import 'video.js/dist/video-js.css'
  import 'videojs-resolution-switcher'
  import 'videojs-resolution-switcher/lib/videojs-resolution-switcher.css'

  // import 'videojs-select-subtitle'
  // import 'videojs-ass'
  // import 'videojs-contrib-hls'
  // import 'videojs-qualityselector'
  // import 'videojs-contextmenu'
  // import 'videojs-contextmenu-ui'
  // import 'videojs-contextmenu-ui/dist/videojs-contextmenu-ui.css'
  // import 'videojs-framebyframe'
  // import 'videojs-errors'
  // import 'videojs-errors/dist/videojs-errors.css'

  videojs.addLanguage('fr', {
    'Play': 'Lecture',
    'Pause': 'Pause',
    'Current Time': 'Temps actuel',
    'Duration Time': 'Durée',
    'Remaining Time': 'Temps restant',
    'Stream Type': 'Type de flux',
    'LIVE': 'EN DIRECT',
    'Loaded': 'Chargé',
    'Progress': 'Progression',
    'Fullscreen': 'Plein écran',
    'Non-Fullscreen': 'Fenêtré',
    'Mute': 'Sourdine',
    'Unmute': 'Son activé',
    'Playback Rate': 'Vitesse de lecture',
    'Subtitles': 'Sous-titres',
    'subtitles off': 'Sous-titres désactivés',
    'Captions': 'Sous-titres',
    'captions off': 'Sous-titres désactivés',
    'Chapters': 'Chapitres',
    'You aborted the media playback': 'Vous avez interrompu la lecture de la vidéo.',
    'A network error caused the media download to fail part-way.': 'Une erreur de réseau a interrompu le téléchargement de la vidéo.',
    'The media could not be loaded, either because the server or network failed or because the format is not supported.': 'Cette vidéo n\'a pas pu être chargée, soit parce que le serveur ou le réseau a échoué ou parce que le format n\'est pas reconnu.',
    'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.': 'La lecture de la vidéo a été interrompue à cause d\'un problème de corruption ou parce que la vidéo utilise des fonctionnalités non prises en charge par votre navigateur.',
    'No compatible source was found for this media.': 'Aucune source compatible n\'a été trouvée pour cette vidéo.'
  })

  export default {
    name: 'videojs',
    props: ['src'],
    data () {
      return {
        msg: 'hello vue'
      }
    },
    mounted () {
      let player = videojs(this.$el, {})
      /*
       player.contextmenu()
       player.contextmenuUI({
       content: [{
       href: 'https://www.brightcove.com/',
       label: 'Brightcove'
       }, {
       label: 'Example Link',
       listener: function () {
       console.log('you clicked the example link!')
       }
       }]
       })
       player.selectSubtitle({
       trackLanguage: 'es'
       })
       */
      player.videoJsResolutionSwitcher({
        default: 'low'
      })
    }
  }
</script>

Ce que je veux

http://codepen.io/anon/pen/wgGBWP

Ce que j'obtiens

J'obtiens un truc degueu:
http://pix.toile-libre.org/upload/original/1484158767.png

Alors que c'est le même CSS :( Je bosse dessus deouis 3h et j'en ai marre.

Merci