What's the best approach to display a set of images and videos sequentially in fullscreen mode on iOS web browsers?

I have this web application in which I'm using video.js to display html5 videos in full screen, and this functionality was working smoothly across different platforms and browsers.

However, there was a new requirement for which I needed to display both images and videos in a specific order in full screen mode like a play list cum slide show.

I have implemented this feature using screenfull.js by making a div go full screen and showing and hiding videos and images alternatively within that div. It is working fine on all platforms but iOS, because iOS doesn't allow that div to go full screen (but it does allow the video player to go full screen but images won't get shown in that case). Now, what's the best work around for this problem? Do I need to write custom js and css for iOS devices to take up the entire visible area of the browser or there is a better solution for this?

Any help will be greatly appreciated. Thanks