Subtitle size with css

[Dacogetul]

I don't know what else to do to be able to change the font sizes of the subtitles depending on the screen size. I tried to add a style.css file in the head and in the file I tried the @media-screen option for example:

`@media screen and (max-width: 360px) {
.op-captions {
font-size: 12px !important;
}
}

@media screen (min-width: 361px) and (max-width: 800px) {
.op-captions {
font-size: 16px !important;
}
}

@media screen (min-width: 801px) and (max-width: 1080px) {
.op-captions {
font-size: 24px !important;
}
}
@media screen (min-width: 1081px) and (max-width: 1800px) {
.op-captions {
font-size: 26px !important;
}
}
@media screen and (min-width: 1801px) {
.op-captions {
font-size: 28px !important;
}
}
`
and don't working... Can somebody show me how can do that..?

[rafa8626]

@Dacogetul is this for full screen mode? Do you have URL to check this?

[Dacogetul]

Here is the link...
More than that, with new(last) openplayer.js or openplayer.min.js cannot change subtitle language....most stop for many time and change language too from button/s for i did it.
If cannot access the link..please tell me your ip for unlock from firewall....Thank you.. Or i can sent page php script with all css and js file...but in that case most change image, subtitle and movie link .... or try to open from phone without router wireless connection. (Prevent some ip if is blocked).
Thank you very much.

[Dacogetul]

I want to tell you ( because the openplayerjs have font size =0 ) I set font size 16px as default for the entire player . Without that your player settings show just arrow like ">". If i change this font(16px) can change all app font ... settings subtitle etc. not just one of this. Can show me a css file to setup font size separately for player or /and subtitle..???
Without posibility to change font size from settings i need to make this responsive.

[Dacogetul]

I managed to change the size of the subtitles separately from those of the player for different sizes of the browser, but I can't keep the proportion of the layer in the browser when I switch to fullscreen mode and I can't bring the layer with the subtitles above the bottom of the player either in openplayer or in fullscreen of another device. i make openplayermain.css with this code:
`.op-player {
background: #000;
font-family: sans-serif;
font-size: 18px;
line-height: 1.15;
min-height: 30px;
position: relative;

}
@media screen and (max-width: 480px) {
.op-captions {
font-size: 70% !important;
}
}

@media screen and (min-width: 481px) and (max-width: 1080px) {
.op-captions {
font-size: 100% !important;
}
}

@media screen and (min-width: 1081px) and (max-width: 1800px) {
.op-captions {
font-size: 150% !important;
}
}

@media screen and (min-width: 1801px) {
.op-captions {
font-size: 180% !important;
}
}`

[rafa8626]

@Dacogetul for full screen more you are using the native cue element, not the one generated by the player. Check in the CSS sheet rules associated with the pseudoselector cue

[Dacogetul]

I don't how to do that im notprogrammer but just a novice...sorry...
is this ? : ::cue{color:#ccc}video:-webkit-media-text-track-display{top:-15%}.
Can help me?

[rafa8626]

Yes those will help you to set the font size for the native captions

[Dacogetul]

If I understood correctly, this means to directly modify the settings in the openplayer.min.css file? I did not find anything in the cue: which contains a caption or subtitle so that I can set the font and the distance of its layer above the settings bar or the bottom edge of the screen

[rafa8626]

You can do that or in a separate styles tag where you can set the new CSS rules to override the result

[Dacogetul]

I think you're joking with me... :) I told you that I don't know how to program anymore... I thought you could help me with a small css code in which I can change the values until I reach the expected result. What I achieved with the css above I found on the internet and the value with .op-caption I took from css. I tried to change the bottom value for each op.caption but I didn't get anything.

[rafa8626]

@Dacogetul for the first issue, add this style after the other ones I provided you:

.op-controls--hidden .op-captions {
    bottom: 0; // adjust it as you like
} 

This won’t affect the captions in iOS fullscreen and there’s not much to do about it, unless JS code is used for that.

For the second issue, can you post the link again, since I tried to click it and nothing happens?

[Dacogetul]

Thank you...can try now....my windows os make update and server do not autorestar after that...work now...please try again.... I make your settings and work in fullscreen mod to change/keep position.....Is it necessary to keep the css settings from .op-captions or are those from .op-controls--hidden .op-captions sufficient? Now my css are this:
`.op-player {
background: #000;
font-family: sans-serif;
font-size: 18px;
line-height: 1.15;
min-height: 30px;
position: relative;

}
.op-controls--hidden .op-captions {
bottom: 25%; // adjust it as you like
font-size: 2.25vw; /* This unit will make the font responsive by using the viewport as reference /
bottom: 3%; / or whatever you want to move it top*/
}
.op-captions {
font-size: 2.25vw; /* This unit will make the font responsive by using the viewport as reference /
bottom: 3%; / or whatever you want to move it top*/
}
::cue {
font-size: 45px;

        }`

[Dacogetul]

PS : just default player have english subtitle.vtt like engleza.vtt !!!!

[rafa8626]

You can leave both styles; that will ensure you are covered for all scenarios

[Dacogetul]

Why cannot change subtitle language with new version?

[rafa8626]

I can change it if I have a different content in the English file. I assume it must be an issue with the VTT file itself.

[Dacogetul]

For you I have made two identical pages, the first called test in which the new version of openplayer is used and takes the data from the dist folder and the second called test 1 in which the previous version of openplayer is used and which works perfectly less on IOS. ...
First version test
Second version test1

[rafa8626]

I’ll take a look at this next week; I changed the approach to use native cues rather than trying to fetch them. I still find it odd that you have a problem with your captions but the ones I’ve been using don’t present that problem

[rafa8626]

@Dacogetul I cannot access either the videos or the website. I tested it again, switching languages, and I was able to get the switching properly. The only thing I'm going to add is to remove the old captions when switching languages, so we prep the container to receive new captions

[Dacogetul]

Okay....then I put the 2 pages with js and css and related video in the archive : HERE

[rafa8626]

@Dacogetul I'm moving this conversation to the issue area. I'm closing this and opening a bug