Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

CSS For Settings Menu Spacing?


Hello,

I'm trying to get the Settings menu spacing to look normal.

Right now I have "Quality" showing and "Playback Rates" showing but both options show up about 2 inches over from the Settings cog and it looks like it's a mistake.

Can anyone let me know if there is a CSS that I can add to adjust this spacing issue?

Thanks in advance!
Shannon

12 Community Answers

Timoor Kurdi

JW Player Support Agent  
1 rated :

Hi,

My name is Timoor Kurdi and I’m a Support Engineer at JW Player.

Do you a link that I can take a look at?

Regards,
Timoor Kurdi
Support Engineer

r...

User  
0 rated :

Absolutely thanks for your response.

Here's my test page that I have the video loaded on: https://members.objectivepersonality.com/test

When you click the gear icon you'll see the settings loading over to the left. It looks even worse on a phone because it covers the video.

Shannon

Timoor Kurdi

JW Player Support Agent  
1 rated :

On this HTML element:

<div class="jw-reset jw-settings-menu"> you have a height being set for 232 px. Change that to your liking, but 190-200px looked good to me.

r...

User  
0 rated :

Hi Timoor,

Thanks for taking a look at that.
So the only code I put in myself was to remove the dark background as you can see below.
Would you be able to let me know where to insert that div class code below?
Thank you!

<style>
.jw-state-idle .jw-controls {
background: rgba(0,0,0,0.0) !important;
}
.jw-controls-backdrop {
background: rgba(0,0,0,0.0) !important;
}
</style>
<script src="https://content.jwplatform.com/players/7Il87lSi-L5pnhIvX.js"></script>

Timoor Kurdi

JW Player Support Agent  
1 rated :

You would have to write separate CSS and insert the file on the page last since this is a custom change.

Something like this should work:

.jw-settings-menu {
height: 190px !important;
}

r...

User  
0 rated :

Oh I see... so I might not be able to do that since I'm on Squarespace.
This code below didn't work and I wouldn't have the slightest idea how to insert a separate CSS file on the page it's on.


<style>
.jw-state-idle .jw-controls {
background: rgba(0,0,0,0.0) !important;
}
.jw-controls-backdrop {
background: rgba(0,0,0,0.0) !important;
}
.jw-settings-menu {
height: 190px !important;
}
</style>
<script src="https://content.jwplatform.com/players/7Il87lSi-L5pnhIvX.js"></script>

Timoor Kurdi

JW Player Support Agent  
1 rated :

Oh, I did not know you were using Squarespace, I’m not sure how that CMS works but Squarespace support might be able to help.

r...

User  
0 rated :

Thanks for all your help Timoor.

I'll keep trying to figure it out.

Take care and have a nice day.

Shannon

Timoor Kurdi

JW Player Support Agent  
1 rated :

You’re welcome.

r...

User  
0 rated :

Hey Timoor!

I figured it out!

It needed to be width not height.

Here's the code I added to the page and it worked:

.jw-settings-menu {
width: 100px !important;
}

Thanks again for all your help I just wanted to let you know I got it working.
Take care,
Shannon

Timoor Kurdi

JW Player Support Agent  
1 rated :

That’s interesting, it worked for me with height, but I am glad you got it working and thank you for letting me know. Have a great day.

r...

User  
0 rated :

You too!

This question has received the maximum number of answers.