Safari not properly displaying videos


I'm uploading mp4 files into the H5P Wordress plugin (H5P version 1.11.3, Wordpress version 5.0.3)and displaying them on the page of my site (using the shortcode like [h5p id="1"]).  The videos work fine via tablet and laptop regardless of which browsers are used (Chrome, Firefox, Internet Explorer, Safari), however, the videos do not view properly via iPhone using ONLY the Safari browser.  Is there a fix for this?  Many people use the Safari iPhone browser given that is what typically comes on the phones.  


BV52's picture

Hi Luke,

In order to give your bug report the best chance of getting answered, please include the following information:

  1. Detailed steps to reproduce the bug (exactly how and when did it happen)
  2. Platform and version number. E.g. Drupal, Wordpress, Moodle.
  3. Mobile or Desktop
  4. Browser: Chrome, Firefox, Safari etc
  5. H5P plugin version
  6. H5P content type and version (if a content type was used), and a sample URL or attached H5P.
  7. Any browser console errors
  8. Any PHP errors
  9. Screenshots if it's a visual problem

The more information you provide, the quicker the community will be able to fix it and the quicker you'll have a working solution!


Here are further details.  

  1. Detailed steps to reproduce the bug (exactly how and when did it happen):  The bug happens when viewing any videos from H5P on my Wordpress website in full-screen mode on a phone or tablet, the video screen gets jumbled with other things on the webpage.  
  2. Platform and version number. E.g. Drupal, Wordpress, Moodle:   Wordpress 5.0.3
  3. Mobile or Desktop:  The issue seems to only happen on a mobile/tablet in Safari browser in full-screen mode.  
  4. Browser: Chrome, Firefox, Safari etc.  The issue only occurs on Safari in full-screen mode on a phone/tablet.  
  5. H5P plugin version:  1.11.3
  6. H5P content type and version (if a content type was used), and a sample URL or attached H5P.  View the H5P video on this website homepage as an example -  I've also attached screenshots of this as an example.  
  7. Any browser console errors
  8. Any PHP errors
  9. Screenshots if it's a visual problem.  Screenshots are attached showing the title from the homepage covering up part of the video when in full screen mode in Safari browser.  
icc's picture

This appears to be an issue with your theme. The '#site-masthead' header element appears to have a much larger z-index than your content. This will always place it on top of the content. 
Why does this only happen for iPhone/iPad? Not all devices support native fullscreen on web pages, as a result, a fallback solution is used that makes the video cover the entire page. This means that if you have other elements ranked higher than the "content" element they will get placed on top.

Thank you for the response!  Is there any way to fix this other than having to change my theme?  

icc's picture

Since you're using WordPress you should be able to edit the CSS file of your theme quite easily to fix the issue.
You probably want someone with a little CSS knowledge to do this for you.

It looks like if you remove the line that says z-index: 3; inside the #site-masthead { } bracket you should be OK.


That worked to remove the title area from overlaying over the video, however there is still another component (it looks like the Wordpress menu bar at the top of the screen) that still goes on top of the videos in Safari.  Is there also a CSS overwrite code you could send me to move that out of the way of videos?  I've attached pictures to show you what Wordpress menu bar I'm referencing.  


icc's picture

Hm, that one is tougher I think. But you only get it if you're logged in, right?

Well, it shows up whether logged in as an admin or just a normal user.  I wouldn't want it blocking my user's videos.  

It comes up when I'm logged in as an admin and when logged in as a user on Safari.  I wouldn't want that to show up when a user is watching the videos.  All Apple products come with Safari (iPhone, iPad, computers), it's not something I'd want to be coming up for users.  Here's another issue I just noticed in the attached picture.  The menu labels are showing up on top of the video.  Do you have any ideas with correcting either the wordpress menu or the site menu labels that come up on top of the video in Safari on iPads/iPhones?  Thanks for your help!

icc's picture

This all has to do with how your theme is built up. There appear to be some low-level z-indexes ensuring that the header parts are always placed on top of any content. It looks like removing z-index: 2; from .site-section-wrapper-main {} bracket fixes all of the issues.


I made the change in the theme CSS, but it didn't correct the issue with the menu text being over the video on an iPad in Safari. Any other ideas?  


The theme developer (Academia Themes) does not believe this is a theme issue.  It doesn't make sense for the theme to somehow choose to display a restyled version of the menu while the video is full screen, and just in Safari on Apple products. There is no red background for the menu words that are overlaying the video from the theme background (  What other options are there to fix the issue?  This H5P plugin should have its own CSS file or JS files that can have this issue corrected, right?  I've attached the image of the issue again with the menu items (Home, About, Free Training, etc) shown over a video. 


icc's picture

Like I mentioned in my first post, not all iPhone/iPad devices have support for fullscreen on webpages. Because of this H5P includes a fallback solution that simply sets the video to cover the entire page. The only drawback with this solution is that the theme can force content on top of the video by setting a z-index higher than the content. But still, this works well with the vast majority of themes.
Sadly, it's an impossible job for H5P to add workarounds for all the themes that are not working because it would result in a lot of code that will slow down other sites that don't use that theme.

This leaves you with two options: 
1. Adapt the theme to be compatible with H5Ps fullscreen solution.
2. Change to a theme that is already compatible.