In this lecture, we're going to load the courses for our video player.
We've got the packages installed.
They come bundled with CSIS for our video player for this course.
I've also added additional CSIS.
We're going to consolidate everything into a single file in your editor.
Open the clip style sheet file.
There are two files that we need to import for the player.
The first file can be found with the following path.
VIDEO J.S. slash dynasty slash video.
Dash G6's.
This file contains the core styles for the player.
The second file has the following path at video J.S. slash thiem's slash DST slash forest slash index
dot CSRTs.
There is one last set of CSIS rules I want to add to this file.
It's the customs CSIS I created for this application.
You can find it by opening these styles access file in the source directory.
You can find these styles by searching for a comment that says videogames ceased start.
Theoretically, we could leave these styles alone.
Our player will work, whether these styles are in the global style sheet or component style sheet for
maintainability.
I recommend moving them to the component style sheet.
It's very likely the player is going to experience changes.
Maintaining styles will be more manageable from a single file.
Mingling B video player styles with the global styles can be challenging to read.
Let's cut everything under this comment.
We are going to grab everything until we reach another comment that says Video dot ciusss and.
Next, go back to the component style sheet and paste the code under the important statements.
Those are the final changes.
Let's try viewing the player in the browser.
The player appears on the page, however, the appearance is not what we were aiming for, the play
button is gone.
As a result, we're unable to play the video.
So what's the problem?
The problems with view encapsulation, here's a topic we covered in an earlier section.
Let's review it one more time.
Behind the scenes, Angular will take a component C assess and encapsulate it.
Here's an example of encapsulation on the left.
We have our CSS code during compilation.
Elements in your template are given a unique ID.
If you selectors are selecting a specific element in the template, Angular will modify the selector
with the ID.
The purpose of this behavior is to prevent your styles from leaking to other components.
For example, you may be using paragraph elements in another component.
You wouldn't want CIUSSS from one component to affect the other component.
We've benefited from this behavior.
It keeps our styles in isolation.
Unfortunately, the tables have turned.
This feature is not always reliable.
Some CIUSSS can't be perfectly encapsulated.
The video package does not have the best access.
We have the option of fixing the CIUSSS, but there's an easier way we can turn off view encapsulation.
By doing so, Angular will not add unique IDs to our elements.
We can disable view encapsulation by configuring the components options, for this example.
We are going to disable view encapsulation on the clip component.
Open this components class in your editor.
At the top of the file, we're going to import the view encapsulation enumerator from the angular core
package.
Enumerators are a feature we haven't had the chance to discuss yet.
You can think of them as a special type of object for storing a list of values.
Enumerators are popular for restricting values to a specific list of values.
Let's look at how an enumerator can help us inside the components configuration object at a property
called encapsulation.
Its value will be the view encapsulation nonmember.
The encapsulation property has three possible values, the value we're using is called none, which
will disable encapsulation angular uses enumerators to prevent us from accidentally using an invalid
value.
Let's try refreshing the page in the browser.
The buttons for the player are appearing on the player by removing encapsulation angular will not all
our styles.
It was causing an issue with our players functionality.
The player is not perfect yet.
The width of the player appears outside the bounds of the container.
Let's fix this issue in the next lecture.