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
Mateo Buitrago
5,629 PointsIn which file are the classes that Nick is targeting in the mejs-treehouse.css?
To style the video player he is using clases like ".mejs-controls", where are those in the html?
2 Answers
Steven Parker
231,275 PointsIn keeping with good design practices, the class definitions are not in HTML files, but are in CSS files. The initial definitions for the .mejs-controls class can be found in mejs/mediaelementplayer.css and in mejs/mejs-skins.css.
It's not defined by itself, but it appears in over 100 descendant selector combinations in those two files.
Tim Wall
9,570 PointsFrom what I can gather regarding where the class of ".mejs-controls" and others are coming from is by having this script in the head of the treehouse-skin.html file
<script src="mejs/mediaelement-and-player.min.js"></script>
Basically, this script is creating a number of <div>s with the afformentioned classes and appending them to the DOM to build the video player. You can see this by checking out the preview using Dev Tools. If you comment out that script then you are left with this in your html file
<video 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>
Hope this helps!
Justin Sze Wei Teo
9,418 PointsJustin Sze Wei Teo
9,418 PointsHi Steven,
I refer to your answer above.
I have the same query, regarding how classes like .mejs-controls, .mejs-captions-selector, .mejs-button, .mejs-captions-button and even the button element itself are nowhere to be found on the treehouse-skin.html file we are working on for this video.
1) Since we are running the treehouse-skin.html file, don't we need to define these classes in this html file for our linked mejs-treehouse.css to work?
2) You've mentioned good design definitions are not in HTML files but in CSS files. Correct me if I'm wrong,but in past Treehouse CSS courses, we've only learnt to define our classes in the html file first, before linking a CSS file to this html file. Am I missing something that is not taught yet? I suspect this has got to do with your last sentence "It's not defined by itself, but it appears in over 100 descendant selector combinations in those two files." (Care to detail?)
After I ran the preview as per the video's instruction, there is indeed still changes in the video player's appearance, even though none of the classes are defined in the html file! But I don't know why it's working!
Kindly advise, thanks!
Regards, Justin