Custom media player skin not taking any css styling changes

Question

The media player is not taking any of my css changes. No orange time rail.. none of it.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Video and Audio</title>

    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>

    <script src="mejs/jquery.js"></script>
    <script src="mejs/mediaelement-and-player.min.js"></script>
    <link rel="stylesheet" href="mejs/mediaelementplayer.min.css">

    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/mejs-treehouse-skin.css">
  </head>
  <body>

    <h1>HTML Video and Audio</h1>

    <div class="wrapper">

      <h2>Video Example</h2>

      <video class="mejs-treehouse" width="852" height="480" controls>
        <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.mp4" type="video/mp4">
        <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.ogg" type="video/ogg">
        <track label="English" kind="subtitles" srclang="en" src="bridge-captions.vtt" default>
      </video>

      <h2>Audio Example</h2>

      <audio class="mejs-treehouse" controls>
        <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge-audio.mp3" type="audio/mp3">
      </audio>

    </div>

    <script>
      $('audio,video').mediaelementplayer({
        success: function(player, node) {
          $("#" + node.id + "-mode").html("mode: " + player.pluginType);
      },
      features: ["playpause", "tracks", "progress"],
      startLanguage: "en",
      translationSelector: true
      });
    </script>

  </body>
</html>


```css

.mejs-treehouse .mej-controls {
 background: rgba(56,64,71,0.98); 
  height: 30px;
}

.mejs-treehouse .mej-controls .mejs-button button {
  outline: none; 
}

.mejs-treehouse .mej-controls .mejs-caption-button {
  margin: 0 7px; 
}

.mejs-treehouse .mej-controls .mejs-captions-selector {
   background: rgba(56,64,71,0.98); 
  width: 100px;
  right: auto;
}

.mejs-treehouse .mej-controls .mejs-time-rail {
  padding: 0; 
}

.mejs-treehouse .mej-controls .mejs-time-rail span{
  height: 100%;
  border-radius: 0px;
}

.mejs-treehouse .mej-controls .mejs-time-rail .mejs-time-total,
.mejs-treehouse .mej-controls .mejs-time-rail .mejs-time-loaded,
.mejs-treehouse .mej-controls .mejs-time-rail .mejs-time-buffering,
.mejs-treehouse .mej-controls .mejs-time-rail .mejs-time-handle {
   background: #2d3339;
  margin: 0;
}

.mejs-treehouse .mej-controls .mejs-time-rail .mejs-time-current {
   background: #ff9900;
}

.mejs-container .mejs-controls .mejs-time-rail .mejs-time-total .mejs-time-float {
   border: none;
  background: none;
  text-shadow: 0px 1px 2px rgba(0,0,0,0.8);
  font-family:Helvetica, Arial;
  font-size: 13px;
  color: #fff;
}

Welcome to the Treehouse Community

Looking to learn something new?

Ryan Duncan

Ryan Duncan

Custom media player skin not taking any css styling changes