The difficulty you’re dealing with with the subtitle management panel being obscured by the video space on iPhones in portrait mode whereas utilizing videoJS might be associated to the stacking context and z-index of the weather concerned. Listed below are a number of recommendations to assist resolve the issue:
Verify the z-index values: Be certain that the subtitle management panel and different {custom} elements have the next z-index worth than the video factor. You may set the z-index explicitly for these components utilizing CSS to make sure they seem above the video. For instance:
css
.subtitle-control-panel {
z-index: 9999; /* or any increased worth */
}
.custom-component {
z-index: 9999; /* or any increased worth */
}
Use place:relative or place:absolute: Apply place:relative or place:absolute to the subtitle management panel and different {custom} elements. Generally, the default place:static could cause points with the stacking order. Experiment with totally different positioning choices to see if it helps in resolving the difficulty.
Modify the stacking context: Parts with the next stacking context will seem above components with a decrease stacking context. If the video factor has the next stacking context than the subtitle management panel, it could trigger the difficulty. You may attempt adjusting the stacking context of the video and subtitle management panel components by making use of place:relative or place:absolute together with the next z-index worth to the mum or dad factor of the subtitle management panel.
Verify for any mum or dad components with overflow or clipping: If any mum or dad components of the subtitle management panel or video have overflow:hidden or are making use of another clipping habits, it would have an effect on the visibility of the subtitle panel. Be sure that the mum or dad components don’t have any unintended clipping or overflow settings that would cover the subtitle management panel.
Check with the newest model of videoJS: Though you talked about that you’re utilizing videoJS 8.3.0, it is value checking if there are any newer variations obtainable. Upgrading to the newest model of videoJS would possibly embody bug fixes or enhancements that would doubtlessly resolve the difficulty.
Think about various approaches: If the difficulty persists, you would contemplate various approaches to displaying the subtitle management panel. For instance, you would attempt positioning the subtitle management panel outdoors the video space, overlaying it on high of the video factor utilizing absolute positioning. This fashion, it will not be affected by the z-index or stacking context of the video factor.
Check on totally different iOS variations: It is doable that the difficulty is particular to sure iOS variations or Safari browser variations. Check your {custom} net video participant on totally different iOS variations and Safari browser variations to see if the difficulty persists or if it is particular to a specific setting.
If none of those recommendations resolve the difficulty, it is likely to be useful to offer extra particulars, such because the HTML and CSS code associated to the video participant and subtitle management panel, or any particular error messages or warnings you encounter. This data can help in additional figuring out the reason for the issue.
