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

【问题标题】：Disable auto fullscreen of YouTube embeds on iPhone在 iPhone 上禁用 YouTube 嵌入的自动全屏
【发布时间】：2024-04-22 06:15:02
【问题描述】：

正如我们从网站上的其他问题到 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 进行此操作，但徒劳无功。

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

【问题讨论】：

标签： ios youtube webkit html5-video mobile-safari

【解决方案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

【讨论】：