The issue you are facing with the subtitle control panel being obscured by the video area on iPhones in portrait mode while using videoJS can be related to the stacking context and z-index of the elements involved. Here are a few suggestions to help resolve the problem:
Check the z-index values: Ensure that the subtitle control panel and other custom components have a higher z-index value than the video element. You can set the z-index explicitly for these elements using CSS to ensure they appear above the video. For example:
css
.subtitle-control-panel {
z-index: 9999; /* or any higher value */
}
.custom-component {
z-index: 9999; /* or any higher value */
}
Use position:relative or position:absolute: Apply position:relative or position:absolute to the subtitle control panel and other custom components. Sometimes, the default position:static can cause issues with the stacking order. Experiment with different positioning options to see if it helps in resolving the issue.
Adjust the stacking context: Elements with a higher stacking context will appear above elements with a lower stacking context. If the video element has a higher stacking context than the subtitle control panel, it may cause the issue. You can try adjusting the stacking context of the video and subtitle control panel elements by applying position:relative or position:absolute along with a higher z-index value to the parent element of the subtitle control panel.
Check for any parent elements with overflow or clipping: If any parent elements of the subtitle control panel or video have overflow:hidden or are applying any other clipping behavior, it might affect the visibility of the subtitle panel. Make sure that the parent elements do not have any unintended clipping or overflow settings that could hide the subtitle control panel.
Test with the latest version of videoJS: Although you mentioned that you are using videoJS 8.3.0, it’s worth checking if there are any newer versions available. Upgrading to the latest version of videoJS might include bug fixes or improvements that could potentially resolve the issue.
Consider alternative approaches: If the issue persists, you could consider alternative approaches to displaying the subtitle control panel. For example, you could try positioning the subtitle control panel outside the video area, overlaying it on top of the video element using absolute positioning. This way, it won’t be affected by the z-index or stacking context of the video element.
Test on different iOS versions: It’s possible that the issue is specific to certain iOS versions or Safari browser versions. Test your custom web video player on different iOS versions and Safari browser versions to see if the issue persists or if it’s specific to a particular environment.
If none of these suggestions resolve the issue, it might be helpful to provide additional details, such as the HTML and CSS code related to the video player and subtitle control panel, or any specific error messages or warnings you encounter. This information can assist in further identifying the cause of the problem.
