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
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
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
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.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>
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;
}
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>
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.
Thanks for all your help Timoor.
I'll keep trying to figure it out.
Take care and have a nice day.
Shannon
You’re welcome.
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
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.
You too!
