Hi.
I have uncovered a bug with the ‘Video’ module on some Apple devices. The issue is that on the affected devices, when the lightbox is rendered, the video does not fill the entire height of the lightbox. This means that is hard for the user to begin video playback, due to the UI elements being cramped together
Below I have included two screenshots, the first is of an unaffected device, the second is an affected device:
I have set up a demo which is accessible at the link below:
https://wordpress-219044-3807008.cloudwaysapps.com/
The following devices I have tested in BrowserStack in both Google Chrome and Safari and have found to be affected:
- iPhone 13 (v16)
- iPhone 14 Pro (v16)
- iPhone 14 Plus (v16)
- iPhone 14 Pro Max (v16) - also tested IRL
- iPhone 13 Pro (v15)
- iPhone 13 Pro Max (v15)
- iPhone 13 Mini (v15)
- iPhone 8 (v15) - also tested IRL
- iPad 10th (v16)
- iPad Pro 12.9 2022 (v16)
The following devices I have tested in BrowserStack in both Google Chrome and Safari and have found to NOT be affected:
- iPhone 14 (v16) - also tested IRL
I have been able to replicate the issue on BrowserStack and in person using my own iPhone 8 and iPhone 14 Pro Max. However, I was not able to replicate the issue at all using the simulator in the latest version of Xcode or just by using the browsers on my MacBook Pro.
BB Version: 2.7.1.1
Themer Version: 1.4.7.1
Thanks for taking the time to read this.
Module Settings:
/// {type:video} Fri Aug 18 2023 ///
{"video_type":"media_library","video":"60","video_webm":"","embed_code":"","video_lightbox":"yes","poster":"63","autoplay":"0","loop":"0","sticky_on_scroll":"no","play_pause":"show","timer":"hide","time_rail":"hide","duration":"hide","volume":"show","full_screen":"show","schema_enabled":"no","name":"","description":"","content_url":"","embed_url":"","thumbnail":"","up_date":"","responsive_display":"desktop,large,medium,mobile","visibility_display":"","visibility_user_capability":"","visibility_logic":"[]","animation":{"style":"","delay":"0","duration":"1"},"container_element":"div","id":"","class":"","node_label":"","export":"","import":"","bb_css_code":"","bb_js_code":"","connections":{"embed_code":"","name":"","description":"","content_url":"","embed_url":"","thumbnail":"","up_date":""},"poster_src":"https://wordpress-219044-3807008.cloudwaysapps.com/wp-content/uploads/2023/08/CleanShot-2023-08-18-at-15.50.34.png","margin_top":"","margin_right":"","margin_bottom":"","margin_left":"","margin_unit":"px","margin_top_large":"","margin_right_large":"","margin_bottom_large":"","margin_left_large":"","margin_large_unit":"px","margin_top_medium":"","margin_right_medium":"","margin_bottom_medium":"","margin_left_medium":"","margin_medium_unit":"px","margin_top_responsive":"","margin_right_responsive":"","margin_bottom_responsive":"","margin_left_responsive":"","margin_responsive_unit":"px","thumbnail_src":""}