YouTube嵌入在移动设备上的行为不同。

huangapple go评论69阅读模式
英文:

YouTube Embed behaving differently on Mobile Devices

问题

在我的网站上,我有一个全屏视频英雄区域。我需要它在桌面和移动设备上都能显示。

在移动设备上,英雄区域不显示视频 - 除非在桌面上,否则在代码中根本不存在 iframe。

当我使用检查元素中的设备类型并将其设置为桌面时,它可以正确加载,而且无论屏幕分辨率如何,视频都可以播放。

我查看了 PHP 模板,我认为问题可能是由于 JavaScript 引起的,因为没有设备敏感的逻辑。

该页面是 https://oateymedia.co.uk/

英文:

On my website I have a full screen video hero. I need it to show on both desktop and mobile.

On mobile devices, the hero doesn't show the video - the iframe doesn't even exist in the code unless on desktop.

When I use inspect element device type and set it to desktop, it loads correctly and the video plays no matter what resolution the screen is set to.

I've looked at the PHP template and I think that JS must be causing the problem as there's no device sensitive logic.

The page is https://oateymedia.co.uk/

答案1

得分: 1

似乎是您正在使用的 mbYTPlayer 库存在问题。许多人抱怨此插件在移动设备上似乎无法正常工作。请参阅:https://github.com/pupunzi/jquery.mb.YTPlayer/issues?q=is%3Aopen+is%3Aissue+mobile

您可以尝试添加 useOnMobile: true,但似乎此插件无法正确识别 iPhone 为移动设备,因此在其上无法正常工作。(甚至此插件的官方演示似乎也无法正常工作!)

话虽如此,实际上将 YouTube 视频用作背景很可能违反了 YouTube 的服务条款

请参阅:
https://stackoverflow.com/a/65065810/5243309

https://developers.google.com/youtube/terms/required-minimum-functionality#overlays-and-frames

英文:

It seems to be a bug with the mbYTPlayer library you're using. Many people have complained that this plugin doesn't appear to work in mobile. See: https://github.com/pupunzi/jquery.mb.YTPlayer/issues?q=is%3Aopen+is%3Aissue+mobile

You can try adding useOnMobile: true, but it seems like this plugin doesn't correctly identify iPhones as mobile, and therefore doesn't work on them. (Even the official demos of this plugin apparently don't work!)

That said, actually using a Youtube video as a background is very likely against Youtube's TOS.

See:
https://stackoverflow.com/a/65065810/5243309

and

https://developers.google.com/youtube/terms/required-minimum-functionality#overlays-and-frames

huangapple
  • 本文由 发表于 2023年7月13日 23:46:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/76681231.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定