Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Video and Audio (Retired) Custom Media Players Polishing a Custom Skin

Posted by Margeaux Spring
Margeaux Spring
34,865 Points

time-rail w/no orange audio file unskinned

Hello. My time-rail is not appearing w/orange and my audio file is not picking up the skin at all.

Here is the link to my workspace snap https://w.trhou.se/mt4f13v5on

3 Answers

Jimmy Saul
Jimmy Saul
9,851 Points
Jimmy Saul
Jimmy Saul
9,851 Points

Hi,

It looks like your selector for the time rail is named incorrectly in your CSS, .mejs.time-rail , rather than .mejs-time-rail

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

Hej Jimmy,

I tried changing that but it doesn't work for me either. Can you please have a look? https://teamtreehouse.com/workspaces/7998772#

Jimmy Saul
Jimmy Saul
9,851 Points
Jimmy Saul
Jimmy Saul
9,851 Points

Hi Elena,

That link doesn't seem to work for me, could you maybe copy and paste your code directly into the thread?

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points 
.mejs-treehouse .mejs-controls {
  background: rgba(56,64,71,0.98);
  height: 30px;

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

 <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">

                <track label="Captions" 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>
Margeaux Spring
Margeaux Spring
34,865 Points
Margeaux Spring
Margeaux Spring
34,865 Points

Hey Elena, It looks like you have an apostrophe after your background: #2d3339 instead of a semicolon, 3rd block from bottom code block in your css file