treehouse skin is being applied to the video player and not the audio player--yes they've been assigned the same class

Question

So I've reached the end of this course and the custom skin I've created is displaying on the video player with no problem, but not the audio player-despite them both being assigned to the .mejs-treehouse class. I'm having a lot of trouble figuring this one out. Here's the code for the treehouse-skin.html:

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

and the mejs-treehouse.css:

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

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

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

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

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

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

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

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

.mejs-treehouse .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;
}

Can someone explain what went wrong here?

Welcome to the Treehouse Community

Looking to learn something new?

joewode

joewode

treehouse skin is being applied to the video player and not the audio player--yes they've been assigned the same class

joewode

joewode