Safari not properly displaying videos

Submitted by lukefeldi on Mon, 02/18/2019 - 15:33
Forums: 
Bugs in content types

Hello,

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.  

Thanks!

BV52's picture

BV52

Tue, 02/19/2019 - 04:49

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!

-BV52

lukefeldi

Tue, 02/19/2019 - 20:30

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 www.theleadershiptraining.com 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 - https://www.theleadershiptraining.com/.  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.  
Attachments: 
Image icon Screenshot_20190219-132109_Browser.jpg
Image icon Screenshot_20190219-132114_Browser.jpg
icc's picture

icc

Thu, 02/21/2019 - 10:08

Hi, 
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.

lukefeldi

Thu, 02/21/2019 - 22:23

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

icc's picture

icc

Mon, 02/25/2019 - 14:38

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.

 

lukefeldi

Mon, 02/25/2019 - 21:24

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.  

 

Attachments: 
Image icon Screenshot_20190225-135909_Browser.jpg
Image icon Screenshot_20190225-135919_Browser.jpg
icc's picture

icc

Tue, 02/26/2019 - 09:53

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

lukefeldi

Tue, 02/26/2019 - 19:01

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.  

lukefeldi

Wed, 02/27/2019 - 01:18

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!

Attachments: 
Image icon Video Issues.PNG
icc's picture

icc

Wed, 02/27/2019 - 10:26

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.

lukefeldi

Sun, 03/03/2019 - 16:19

Hello,

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?  

lukefeldi

Wed, 03/06/2019 - 21:16

Hi,

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 (https://www.theleadershiptraining.com).  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. 

-Luke

Attachments: 
Image icon IMG_0053.PNG
icc's picture

icc

Fri, 03/08/2019 - 13:11

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. 

lukefeldi

Sat, 03/30/2019 - 22:55

Hello,

After the most recent update to H5P (v 1.13.1) in Wordpress, the videos work fine on all devices and browsers that I've used except the video completely disappeared when using an iPad on Safari browser.  See attached pictures showing an image from the homepage of www.TheLeadershipTraining.com on an iPad on Safari compared to the image of the site on the computer screen.  There should be a video below the text "Overview of the Program:."  Any ideas how to have the video visible on the iPad in Safari?  Any customizable CSS I can add to the theme?  I want to try to avoid adjusting the theme.  Thank you.  

-Luke

Attachments: 
Image icon Safari Browser on iPad.jpg
Image icon Computer Chrome Browser.jpg
BV52's picture

BV52

Mon, 04/01/2019 - 07:42

Hi Luke,

Do you have any details for the Ipad like iOS version and Safari Version? I am unable to reproduce the issue.

-BV52

lukefeldi

Fri, 04/12/2019 - 15:51

Hi,

The iPad version is 9.3.5 (13G36) and Model is MC706LL/A.  I was unable to find the version of Safari for some reason, but it wasn't due for an update.

-Luke

BV52's picture

BV52

Mon, 04/15/2019 - 07:44

Hi Luke,

I still can't reproduce the issue. Can you please check if you have any browser console errors?

-BV52

lbarriocanal

Tue, 05/10/2022 - 23:07

I fixed it with this custom code

@media screen and (max-width: 980px) {

body.h5p-fullscreen {

z-index: 3000;

position: relative;

}

header.header {

z-index: 1;

}

  }

Do you know a better way?

sangita8252

Tue, 11/07/2023 - 13:15

We are using moodle 4.0 version. When we are adding h5p video. Its playing in browser like chrome and internet explorer.  But when we try to access in safari browser it giving "video not supported " error. We are using Safari version 11.

BV52's picture

BV52

Tue, 11/07/2023 - 18:12

Hi sangita8252,

H5P uses the buit-in video players of browsers. Usually, video playback problems are related to the video file itself. I.e: there are many ways to generate an mp4 file, and it won't necessarily be optimized for the web. We typically advise people to run their video through a video optimization tool like Handbrake (handbrake.fr) to optimize your video. Handbrake comes with presets, and you could e.g. use "Web -> Vimeo YouTube HQ 1080p60"."

Please note that the link above is only an example and  we have not tested this software extensively. We will not be liable to errors or problems occurring in connection with a download of the third-party software. Use this at your own risk.

-BV