Fullscreen / Discovered Fontawesome issue - Course presentation

stopbit's picture

Hi there,

I'm using wordpress (updated today using the latest libraries from 16/02/2016).

Full screen button not displaying in mobile devices - work around?

I was just doing some checks as I noticed the symbols to go full screen button does not show on certain mobile devices; at least when embedding as an iframe - this is my use case. As I was checking this issue with the button not displaying, seeing if I can put a piece of code on the first presentation slide, so there is a full screen button, to get around this issue.

If anyone knows how to add fullscreen button to a slide I would love to know how to acheive this!! I have poked around the code, but not found it as yet. Any hints would be most welcome.

Font issue

As I was investigating I noticed a font loading issue, my firefox inspec element tool shows this font cannot be loaded:

downloadable font: download failed (font-family: "H5PFontAwesome4" style:normal weight:normal stretch:normal src index:1): status=2147746065 source: http://www.my-domain-name.com/wp-content/uploads/h5p/libraries/FontAweso...fontawesome-webfont.woff2?v=4.5.0

The problem, I believe is in the file name - to compare see the bold text:

  1. http://www.my-domain-name.com/wp-content/uploads/h5p/libraries/FontAweso....woff2
  2. http://www.my-domain-name.com/wp-content/uploads/h5p/libraries/FontAweso....woff

The second example will load the font file as this exists in the folder, the first does not contain the file named ***.woff2

Now I could duplicate hte font and rename it, so the domain does not kick out an error, but obviously this isn't ideal.

Hopefully we can get this fixed in a  quick update to libraries.

Thanks

falcon's picture

Hi stopbit,

Thank you for sharing. I've answered the fullscreen issue in another issue. We have disabled the button for browsers that doesn't support fullscreen in iframes. Regarding the font I'll ask icc to comment and hopefully fix this issue.

Have a nice day!

icc's picture

H5P has a built-in whitelist to prevent dangerous file extensions. Unfortunately, Woff2 isn't among the "safe" file types, which means that it's removed when Fontawesome is uploaded. We will add to support for it in the next version of the H5P plugin.

However, the font should still be loaded and available as it has many fallbacks. You could try uploading the woff2 manually to the wp-content/uploads/h5p/libraries/fontawesome-4.5/ folder to see if it will make any difference.

stopbit's picture

Hi Guys,

Thanks for your replies. At the time for a quick fix, I did manually copy and rename a the existing font called: ***.woff to ***.woff2, but it's not contained within the package. By doing so, this had a positive effect as fonts were sometimes loading as dogey looking symbols on some** browsers - mainly mobile ones. The above gets rid of font load issues.

To confirm, I checked the complete .h5p package I downloaded recently, using a 7zip dated from the 19th Feb, but there is no woff2 font in there, see screen shot.

Thanks for the assistance, hope this helps guys  :-D

 Cheers

icc's picture

Are you getting any error messages when the font isn't working? You can open your browsers console using Ctrl+Shift+J in Chrome and then reload the page.

stopbit's picture

Hi,

The error message in the output is much the same as the firefox output, here's the message:

first error: Failed to load resource: the server responded with a status of 404 (Not Found)

file in question: http://www.my-doamin.com/wp-content/uploads/h5p/libraries/FontAwesome-4....

Second error: Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messag...

file in question: util.js:22

Not really sure where the util.js error comes from, I'm probably not using it.

Hope that helps

 

icc's picture

Thank you, it seems that adding the woff2 support will fix the issue.

stopbit's picture

 

No worries, glad I could help with this small bug.

:-D