嵌入没有 iframe 的 HTML5 YouTube 视频？

Posted 2023-02-24

【中文标题】嵌入没有 iframe 的 HTML5 YouTube 视频？

【英文标题】：Embed HTML5 YouTube video without iframe?

【发布时间】：2013-09-14 14:37:36

【问题描述】：

是否可以在不使用 iframe 的情况下嵌入 html5 版本的 youtube 视频？

【问题讨论】：

可能但不可靠 - ***.com/questions/5157377/…。这是文档页面（没有列出以前的方法）：developers.google.com/youtube/player_parameters。只是出于兴趣，你为什么不想使用 youtube 的 iframe 嵌入代码？

@Joe 我一直在 ios 上遇到 iframe 的内存使用问题，所以正在寻找替代方案。

YouTube 的文档（截至目前）指出 iframe 是推荐的嵌入方法：developers.google.com/youtube/…。他们还弃用了替代选项，例如<object> 选项。所以最好还是坚持<iframe>。

我也有这个原因，我只想使用 youtube 视频进行 webgl 纹理渲染。没有 src 我无法做到，我还需要播放视频 html5 标签。 @andrewb 我会尝试使用对象标签。

@andrewb iframe 内容能够绕过同源策略，这意味着您可以让谷歌访问您的 IndexedDB 数据库。

【参考方案1】：

由于 GDPR，使用 iframe 没有任何意义，您应该使用带有 embed 标记的 object 标签并同时使用 embed 链接。

<object  >
  <param name="movie" value="https://www.youtube-nocookie.com/embed/Sdg0ef2PpBw">
  <embed src="https://www.youtube-nocookie.com/embed/Sdg0ef2PpBw"  >
</object>

您还应该激活扩展数据保护模式功能以接收无 cookie url。

type="application/x-shockwave-flash" 

不必使用闪光灯

然而，Nocookie 表示仍在传输数据，即从 YouTube 加载的缩略图。但至少数据不再传递到广告网络（例如 DoubleClick）。并且 youtube 不会在您的网站上存储任何用户数据。

【讨论】：

您应该/需要添加关于您的代码如何工作的说明

请解释发生了什么以及 url youtube-nocookie 正在做什么。上面的cmets说flash是不需要的，为什么这里需要呢？

@dippas 这不是一个函数，而是一个超文本标记语言的视频，在 HTML 标签中调用“你的代码是如何工作的”？这是如何在没有 iframe 的情况下集成 YouTube 视频的问题。

【参考方案2】：

这是一个没有 iFrame 的嵌入示例：

<div style="width: 560px; height: 315px; float: none; clear: both; margin: 2px auto;">
  <embed
    src="https://www.youtube.com/embed/J---aiyznGQ?autohide=1&autoplay=1"
    wmode="transparent"
    type="video/mp4"
     
    allow="autoplay; encrypted-media; picture-in-picture"
    allowfullscreen
    title="Keyboard Cat"
  >
</div>

与 YouTube 中的常规 iframe“嵌入”代码比较：

<iframe
  
  
  src="https://www.youtube.com/embed/J---aiyznGQ?autoplay=1"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

就 HTML5 而言，像这样使用<object> 标签（更正）：

<object
  style="width: 820px; height: 461.25px; float: none; clear: both; margin: 2px auto;"
  data="http://www.youtube.com/embed/J---aiyznGQ?autoplay=1">
</object>

【讨论】：

完全不嵌入Adobe Flash，使用<object>标签

这似乎不适用于 iOS ......它根本不想显示视频。 iOS 不支持

@anapsix 实际上看起来 <object> 已被弃用。见这里：developers.google.com/youtube/player_parameters?hl=en

@anapsix 为什么object标签的style属性有多个width和height css属性？

更新了工作示例。现在是 2020 年，<object> 标签仍然有效

【参考方案3】：

使用对象标签：

<object data="http://iamawesome.com" type="text/html"  >
  <a href="http://iamawesome.com">access the page directly</a>
</object>

参考：http://debug.ga/embedding-external-pages-without-iframes/

【参考方案4】：

是的。 Youtube API 是最好的资源。

嵌入视频有 3 种方式：

使用<iframe>标签嵌入IFrame 使用 IFrame Player API 嵌入 IFrame AS3（和 AS2*）对象嵌入

DEPRECATED

我认为您正在寻找其中的第二个：

IFrame embeds using the IFrame Player API

下面的 HTML 和 javascript 代码显示了一个简单的示例，该示例将 YouTube 播放器插入到 id 值为 ytplayer 的页面元素中。此处指定的 onYouTubePlayerAPIReady() 函数会在加载 IFrame Player API 代码时自动调用。此代码没有定义任何播放器参数，也没有定义其他事件处理程序。

<div id="ytplayer"></div>

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() 
    player = new YT.Player('ytplayer', 
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE'
    );
  
</script>

Here are some instructions 开始使用 API 时可以查看。

---

不使用iframe 的嵌入示例是使用<object> 标签：

<object  >
    <param name="movie" value="http://www.youtube.com/embed/yt-video-id?html5=1&amp;rel=0&amp;hl=en_US&amp;version=3"/
    <param name="allowFullScreen" value="true"/>
    <param name="allowscriptaccess" value="always"/>
    <embed   src="http://www.youtube.com/embed/yt-video-id?html5=1&amp;rel=0&amp;hl=en_US&amp;version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>

（将yt-video-id 替换为您的视频ID）

JSFIDDLE

【讨论】：

这仍然使用 iframe 嵌入视频

@user2217162 为什么不想使用 iframe？

问题是关于“没有 iframe”嵌入 html5 youtube 视频。

查看我的答案以获得不带 iframe 的选项

好吧，我添加了一个不使用 iframe 的嵌入示例。如果启用了 HTML5，它将被使用。如果不是，它可能会在 Flash 模式下回退。不确定这是否是 OP 想要的。

【参考方案5】：

是的，但这取决于您所说的“嵌入”；据我在阅读完文档后所知，如果您想使用 iframe API 来解决问题，您似乎有几个选择。您可以使用 javascript 和 flash API (https://developers.google.com/youtube/player_parameters) 来嵌入播放器，但这涉及在您的代码中创建 Flash 对象（我个人避免这样做，但不一定非要这样做）。以下是 Youtube API 开发文档中的一些有用部分。

如果您真的想绕过所有这些方法并在没有任何 iframe 的情况下包含视频，那么您最好的选择可能是创建一个可以连接到 Youtube Data API (https://developers.google.com/youtube/v3/) 的 HTML5 视频播放器/应用程序。我不确定您的需求有多大，但如果您真的想要使用任何 iframe 或 Flash 对象来解决问题，这将是可行的方法。

希望这会有所帮助！

---

有用：

(https://developers.google.com/youtube/player_parameters)

使用 IFrame Player API 嵌入 IFrame

在 Player API 的 JavaScript 代码加载后，按照 IFrame Player API 说明在您的网页或应用程序中插入视频播放器。视频播放器构造函数中的第二个参数是一个指定播放器选项的对象。在该对象中， playerVars 属性标识玩家参数。

下面的 HTML 和 JavaScript 代码显示了一个简单的示例，该示例将 YouTube 播放器插入到 id 值为 ytplayer 的页面元素中。此处指定的 onYouTubePlayerAPIReady() 函数会在加载 IFrame Player API 代码时自动调用。此代码没有定义任何播放器参数，也没有定义其他事件处理程序。

...

使用标签嵌入 IFrame

在您的应用程序中定义一个标签，其中 src URL 指定播放器将加载的内容以及您要设置的任何其他播放器参数。标签的高度和宽度参数指定播放器的尺寸。

如果您自己创建元素（而不是使用 IFrame Player API 创建它），您可以将播放器参数直接附加到 URL 的末尾。 URL 的格式如下：

...

AS3 对象嵌入

对象嵌入使用标签来指定播放器的尺寸和参数。下面的示例代码演示了如何使用嵌入对象来加载自动播放与前两个示例相同的视频的 AS3 播放器。