在 iPhone 上禁用 YouTube 嵌入的自动全屏

Posted 2023-05-07

【中文标题】在 iPhone 上禁用 YouTube 嵌入的自动全屏

【英文标题】：Disable auto fullscreen of YouTube embeds on iPhone

【发布时间】：2017-04-19 01:10:18

【问题描述】：

正如我们从网站上的其他问题到 ios Mobile Safari 中所知道的那样，我们有这些美味的属性 webkit-playesinline 和更简洁的 playsinline 来禁用自动全屏视频。

尽管有这样的奇迹，但我仍然无法弄清楚如何将其添加到 YouTube html5 嵌入中。正如预期的那样，YouTube <video> 包含在 <iframe> 中。

理想的结果如下：

<video 
    tabindex="-1" 
    class="video-stream html5-main-video" 
    style="width: 736px; height: 414px; left: 85px; top: 0px;" 
    src="blob:https://www.youtube.com/6889sdad6d2-ec51-49ca-b357-a5bd9c3ede71" 
    webkit-playsinline="true" 
    playsinline="true">
</video>

我曾尝试通过 jquery 进行此操作，但徒劳无功。

任何想法或想法如何做到这一点？

【参考方案1】：

将playsinline=1 参数添加到嵌入网址。前酌情添加?或&； ? 如果是唯一参数，& 与其他参数连接。

例子：

<iframe
  src="https://www.youtube.com/v/VIDEO_ID?playsinline=1">
</iframe>

来自YouTube iFrame Player API：

此参数控制视频在 iOS 上的 HTML5 播放器中是内联播放还是全屏播放。有效值为： 0：此值导致全屏播放。这是当前的默认值，但默认值可能会更改。 1：该值会导致对使用allowInlineMediaPlayback 属性设置为TRUE 创建的UIWebViews 进行内联播放。

【讨论】：

请注意，如果您使用的是 javascript 加载样式，则类似于 playerVars: 'controls': 0, 'playsinline': 1 ,

@rogerdpack 作为记录，您是否能够在 iOS 的浏览器中自动播放插入 youtube-player-API 的视频？我的不一致：有时会，有时不会（React）。

漫长而艰难的一天......正是我正在寻找的解决方案，谢谢！

@JohnContarino 我遇到这个的那天，这也是漫长的一天。很高兴能帮上忙！

为什么我不能让它工作？我正在使用 ionic mu url 是这样的youtube.com/embed/idididdididi?playsinline=1

【参考方案2】：

根据当前的 API 描述，playsinline 应设置为 0 以避免在 iOS 设备上全屏。

参见以下描述，位于：https://developers.google.com/youtube/player_parameters