vimeo with domain protection not working in interactive video on apple products

Submitted by Pir1981 on Fri, 04/21/2023 - 09:20
Forums: 
Bugs in content types

Hi,

fist let me say, how amazing H5P is! Thank you for your efforts! 

We believe we have found a bug, which I want to share.

Problem summary: vimeo video with embedded protection to a domain on, does not load on iOs in H5P

General info: We use vimeo as our video service. To protect our videos we have the vimeo "domain protection" set to only our domain. This allows our videos to be played back only if they are on our domain.

Used software: We use wordpress.

Tested without H5P: All works fine across all platforms (widows, android, iOS), if the protected videos are embedded only in wordpress directly. 

Found behavior: The issue starts, when using H5P interactive video. The H5P interactive video with embedded vimeo content works perfectly on windows (chrome, firefox) and also on android (chrome, firefox). But on tested apple devices (iPads, iPhones - Safari and Chrome) we found that when the domain protection is on the video is not loaded stating "video could not be loaded".

Expected behavior: Independent of windows/android/apple, videos with "embed restriction" should play even when within H5P (even on iOs devices)

Tried solutions: When embedding protection is turned off, videos play just fine on iOs

Contacted providers: We wrote with vimeo, thinking that might be an issue with them, but their statement after checking with send level support is, that this issue is due to H5P and not vimeo, adding:

"It's also worth noting that Vimeo's privacy settings and custom embed settings do not apply to third-party player links. The third-party player you're using might support its own set of customizations, but you will need to check out their support documentation for more info. To learn more, visit our help center article here."

Any thoughts on this?

Thanks!

Summary: 
vimeo with domain protection not working in interactive video on apple products

Somion

Wed, 05/24/2023 - 19:13

How you Insert the Vimeo Video?

Pir1981

Wed, 06/28/2023 - 10:22

Hi Somion,

under H5P (in wordpress) we create the interactive video and then set the link (i.e. https://vimeo.com/000000000 - this number is just an example ) unter "Youtube-Link or other video-URL". 

On the frontend we then use gutenberg shortcode block with the H5P ID.

As said, all works fine under windows and android. Apple products are the only ones that cause this isseu.

If we set "embed anywhere" under vimeo, it also works for Apple products. We talked to vimeo already and their tech support states it is a H5P problem.

Any ideas on how to solve it?

otacke's picture

otacke

Wed, 06/28/2023 - 17:27

Hi!

If we set "embed anywhere" under vimeo, it also works for Apple products. We talked to vimeo already and their tech support states it is a H5P problem.

Did they potentially leave some more information on what causes the issue or were they merely saying it's H5P? Not ruling the latter out by any means, but if Vimeo know it's not a problem with Vimeo, they should be able to tell in more detail what the problem is caused by.

Best,
Oliver

Pir1981

Mon, 03/04/2024 - 17:32

Hi Oliver, no, they just stated that given that when the video is not within H5P it works just fine and when within H5P it works on windows and android, but not iOS it is definitely H5P....

otacke's picture

otacke

Mon, 03/04/2024 - 17:58

Can't be that pressing if it took 9 months to answer :-D Someone with a vimeo pro account who can change the embed setting to something else then "everywhere" and "nowhere" will need to look into this this - and it would help if that person knew what exactly you configured for the domain that the content can be embedded into.

Pir1981

Tue, 03/05/2024 - 08:45

After talking to vimeo, I just had little confidence anyone could/would do anything about it, so I set all our videos to "everywhere" and lived with it. It was also because we created few new content with h5p that it actually didn't pop-up. But we picked up the pace and usage of h5p again, preparing more content and the issue came up again. And now it is basically always a decision ... is this video important enough to remain hidden, thus no h5p content, or would it be more useful to have h5p content with the downside of allowing the video to be embedded anywhere.

And we just believe it would be nice to have h5p AND be able to hide the video.

For the domain. You just go to the privacy options (when you click on the video and then in the top menu the 3rd button (fist is analysis, second commends and third the one for the settings - the name depends on what you have selected as "link" option.) At the bottom you find embed anywhere / nowhere / specific domains.

And there you select "specific domains" and just put "mydomain.com" as you domain to be allowed. We had our set to "ourdomain.de", but I would be surprised, if .com or .de would make the difference (but have not tested it, as we have no .com domain).

otacke's picture

otacke

Thu, 03/07/2024 - 00:34

I know how to find the settings, but you cannot limit the embed to specific domains unless you have a Pro account or higher - hence my comment.

Pir1981

Thu, 03/07/2024 - 09:22

What are you looking for? We have a pro account, so maybe I can supply what you need.

otacke's picture

otacke

Thu, 03/07/2024 - 23:25

I am not looking for anything :-) But if one wanted to, one would check the development console (by remote inspection) for error messages that should allow to pinpoint the issue.

stopbit's picture

stopbit

Thu, 10/24/2024 - 15:09

Hi otacke,

I believe I also have hte same issue, this time with Moodle using course presentation, inserting a video element. The vimeo videos are set to protected and the moodle domain is on the allow list. I have lots of students complaining they get the 'cannot load video' error.

I'd be will to assist in any debug you may need; obviously I have a pro vimeo account.

Thanks, also see here: https://github.com/h5p/h5p-video/issues/120 - but you've already replied stating it would be better to post to the h5p forum.

otacke's picture

otacke

Thu, 10/24/2024 - 18:37

I am the wrong addressee. I can't solve all the world's H5P problems in my spare time.

stopbit's picture

stopbit

Fri, 10/25/2024 - 10:43

Hey otacke, apologies I assume you worked for H5P in some capacity.

It doesn't appear these forum posts are garnering any attention from h5P moderators as yet.

BV52's picture

BV52

Fri, 10/25/2024 - 18:24

Hi stopbit,

Our developers are already aware of this issue. However, we do not have a timeline when it will be prioritized.

-BV

stopbit's picture

stopbit

Mon, 10/28/2024 - 16:43

Hi BV52,

Thank you for your reply. I went ahead and purchased a Mac devvice, so I can test this out more thoroughly.

From my findings both Youtube and Vimeo external video urls do not work with H5P with Safari using a Mac, similarly with Safari using an iPhone. It does not matter if the domain is restricted or not in vimeo (obviously Youtube doesn't have domain restrictions, but doesn't work either).

I have now began a long process to remove videos using H5P from our training materials. Instead replacing these with Moodle activities, such as a page, lesson, etc. using embed code from vimeo, or the youtube url link with the default Moodle media plugin.

Other H5P activities that include video urls, but we are feasibly unable to remove from our content; videos are now being directly uploaded to the H5P content instead of using the remote url.

The problem created:

However, this goes against the very reason we started with a pro version of vimeo

  1. To provide a better streaming service for videos to our student.
  2. Stop unecessarily large video content being stored (and backed-up) in our moodle.
  3. Reduce bandwith for our hosted servers.
  4. To prevent easy download of our video content, which can be shared elsewhere online - With vimeo pro and restricing embed domains, we can acheive this, unfortunately not if we use H5P + video urls. Videos can be easily saved locally (right click save video as) from the h5p activity.

I hope you find a solution to this soon.

Can you tell me where I can monitor the bug/issue tracker please?

otacke's picture

otacke

Mon, 10/28/2024 - 21:19

You may want to improve your report - I cannot confirm your claim that YouTube videos are not working on Safari.

I tested with https://h5p.org/node/1508046 on Safari 16, 17 and 18 both on MacOS and iOS. Works nicely - see images showing Safari 18 + 16.

Attachments: 
Image icon Screenshot from 2024-10-28 21-13-50.png
Image icon Screenshot from 2024-10-28 21-15-27.png
Image icon Screenshot from 2024-10-28 21-13-50.png
Image icon Screenshot from 2024-10-28 21-15-27.png
stopbit's picture

stopbit

Tue, 10/29/2024 - 15:26

Hi,

I used a MacBook, latest Safari, lastest OS completed up to date. I purchased this device specifically to test for Mac issues on our platforms.

For Youtube videos within any H5P activity (typically we use course presentation) it displays a message that the video cannot be watched, but does provide a link to the video on youtube itself.

Vimeo videos simply do not play with the message video cannot be loaded, regardless if restricted by domain embed or not.

I also have reports of the same issues from my customers/students, so perhaps it is Moodle specific, as here on h5p.org I believe it uses Drupal, so perhaps that is the difference?

My report remains accurate as the time of testing.

Thanks

otacke's picture

otacke

Tue, 10/29/2024 - 16:51

Any messages in the development console? Can you provide a direct link to the content, so others can experience it directly (e.g. in an extra course that doesn't require to log in)?

Those are the crucial things that help, but it may have been too much effort to read my post.

stopbit's picture

stopbit

Tue, 10/29/2024 - 17:29

Hi otacke,

I did read your post, but did not notice the link to further documentation regarding bug reports.

At present my live system requires users have a login and are a customer. I use SSO with wordpress, so users can access Moodle once they have made a purchase.

I would feel uncomfortable providing login details publicly for testing purposes. Though, I do have a development Moodle platform, I can provide access here, though I would need to create a user and provide login details securely.

Presently my team is far through the process of replacing the videos as previously mentioned, so I could only setup a test course with test activities to demonstrate the issue. Though, as I have been informed the H5P devs are aware of the issue, it was my expectation they would also be aware of the same issue, regardless of domain restriction settings within Vimeo; and that it also affects YouTube videos - anything that is an external url.

The device I used to test is not simulated, it's an actual MacBook. I did not see anything particularly obvious in the browser dev tools console except for 'blocked frame origin', which is why I did not provide screenshots of it previously. However, I've just located a photo (I would have taken a screenshot, but this new Mac doesn't really have any software installed, so was easiest).

The error seems that something is missing in the domain header/referrer information that Safari is not interpreting correctly. In fact, the issue seems to be related to Safari's strict cross-origin policy. Safari blocks some cross-origin interactions that other browsers may allow, particularly when it detects that an iframe on your Moodle site is attempting to interact with a YouTube video hosted on a different domain. Since the protocols, domains, and ports don’t match (Moodle on elearning.sheilds.org vs. YouTube on youtube.com), Safari enforces a same-origin policy.

Youtube error: See an example of the console errors using Safari on Mac, in the background you can clearly see the placeholder when a youtube video does not play. This yt error where the video should be, contains a link to watch the youtube video on the yt site directly: https://h5p.org/node/1508192

This video worked on Windows 10 / 11 and all flavours of browsers, but not on this new Mac / Safari.

I would love to be inventing errors, but alas, this one is real so I can't claim kudos for creating it lol; and might possibly be a newly reported issue if your YT videos work from your testing environments. This is Moodle version 4.2.10+

Thanks

otacke's picture

otacke

Tue, 10/29/2024 - 17:51

I linked to https://snordian.de/2024/02/17/how-can-i-craft-an-effective-bug-report-for-h5p-components/ using the text "improve your report" :-)

The devices I use are not simulated. Browserstack runs on real machines.

Your admins may want to check whether your server imposes "Content-Security-Policies" that block loading of external content.

stopbit's picture

stopbit

Tue, 10/29/2024 - 17:59

Hi otacke,

I have reviewed my server configurations, in apache, htaccess and nginx on my LAMP server.

Any lines where same site origin exists are commented out or not stipulated at all, nor in use.

So, the server does not appear to be imposing this setting natively.

There are no settings for this within moodle to my knowledge that can impose this.

Additionally, it is only safari on the Mac that gives this error in web dev browser console.

Actually, I have come back to edit this post as I recall moodle does have a referrer option in http security settings, see page 2 here: https://h5p.org/node/1508192


Currently set as default on my moodle, I could change this option and re-test.

In your opinion which should I attempt to use first?
These are the options in moodle, I assume default is option 1, which is 'no referrer'

  • Default
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin
  • strict-origin-when-cross-origin
  • unsafe-url

Thanks

otacke's picture

otacke

Tue, 10/29/2024 - 19:02

I'd still assume this is a CORS issue. If it's not imposed by the server (which - you are absolutely right - would not only impact Safari).

Just to narrow things down, you could temporarily (!)

  1. Disable cross-origin restrictios (Safari > Settings > Development > Disable cross-origin restrictions).
  2. Disable Safari's Tracking Prevention (Safari > Settings > Privacy > Prevent cross site tracking).

Does any of these make a difference?

You could also try to host a minimal YouTube API frame example in a static HTML file on your server and look at in with Safari.

<html>
<head>
    <script src="https://www.youtube.com/iframe_api"></script>
    <script>
        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '360',
                width: '640',
                videoId: 'enYdAxVcNZA'
            });
        }
    </script>
</head>
<body>
    <div id="player"></div>
</body>
</html>

Does this play?

If you then use

<html>
<head>
    <script src="https://www.youtube.com/iframe_api"></script>
    <script>
        var origin = window.location.href.match(/http[s]?:\/\/[^\/]+/);
        origin = (!origin || origin[0] === undefined) ? undefined : origin[0];

        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                origin: origin,
                height: '360',
                width: '640',
                videoId: 'enYdAxVcNZA'
            });
        }
    </script>
</head>
<body>
    <div id="player"></div>
</body>
</html>

does anything change? This one sets the origin which it tries to determine from the current URL of the page.

Remote guessing for causes without being able to investigate myself is really not my thing, so I hope someone else might be more into this or have a way to actually reproduce the problem.

Best,
Oliver

Pir1981

Thu, 03/07/2024 - 09:27

I have also prepared a testing site with/without embedded active only for vimeo and with/without h5p all copared on one page (that was here https://h5p.org/node/1363849), but noone was interested, so I took it down again. It is a bit of work, but I can prepare it again, if that would help you to find and fix the problem.

Basicly I showed

  • youtube
  • vimeo with embedded
  • vimeo without embedded
  • h5p with vimeo with embedded
  • h5p with vimeo without embedded

If you would need anything else on the page, you could just let me know. Would you then be able to locate the problem and potentially fix it?

 

JESSIKA COSTA

Thu, 03/21/2024 - 21:51

Estou enfrentando o mesmo problema. Os videos incorporados do vimeo não funcionam em dispositivos APPLE. Realizei diversos testes mudando a privacidade de domínio e ainda assim não funcionou. O video roda apenas quando jogo o arquivo em MP4 diretamente nele.

"I am facing the same problem. Embedded videos from Vimeo do not
work on APPLE devices. I carried out several tests changing the
domain privacy and it still didn't work. The video only plays
when I play the MP4 file directly on it."