Hello all,
We need to show an embedded live streaming video in a webpage along with some dynamic content that the user will interact with (such as a chat box). This works on all devices except on smaller iOS devices, namely, iPhones and iPods. On iPhones and iPods, the video always plays in full screen instead of playing in-line.
The embedded video documentation for Safari makes note of this behaviour: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html,
From the documentation:
"Currently, Safari optimizes video presentation for the smaller screen on iPhone or iPod touch by playing video using the full screen—video controls appear when the screen is touched, and the video is scaled to fit the screen in portrait or landscape mode. Video is not presented within the webpage. The height and width attributes affect only the space allotted on the webpage, and the controls attribute is ignored. This is true only for Safari on devices with small screens. On Mac OS X, Windows, and iPad, Safari plays video inline, embedded in the webpage.".
As you can imagine, it is essential that the video not take over the full screen as we have other content that the user must view and interact with while watching the video. The video must also be embedded within the web-page as it is a video streamed on another site.
Here's a screenshot of what we're trying to accomplish:
https://www.dropbox.com/s/964wpoai1ti3mx6/image-1.png?dl=0
If you can kindly inform us about the solutions or workarounds for this, it would be much appreciated.
Thanks
Satya