无需 iframe 即可嵌入 HTML5 YouTube 视频?

问题描述 投票:0回答:6

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

javascript jquery html youtube
6个回答
30
投票

这是一个不使用 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"
    width="100%" height="100%"
    allow="autoplay; encrypted-media; picture-in-picture"
    allowfullscreen
    title="Keyboard Cat"
  >
</div>

与 YouTube 中的常规 iframe“嵌入”代码相比:

<iframe
  width="560"
  height="315"
  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>


9
投票

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

有3种方式嵌入视频:

  • IFrame 使用
    <iframe>
    标签嵌入
  • 使用 IFrame Player API 嵌入 IFrame
  • AS3(和 AS2*)对象嵌入
    DEPRECATED

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

使用 IFrame Player API 嵌入 IFrame

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

<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>

这里有一些说明,您可以在开始使用 API 时查看。


不使用

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

<object width="640" height="360">
    <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 width="640" height="360" 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


3
投票

由于 GDPR,使用 iframe 没有任何意义,您应该将对象标签与嵌入标签一起使用,并使用嵌入链接。

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

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

type="application/x-shockwave-flash" 

不一定要使用闪光灯

Nocookie则意味着数据仍在传输,即从YouTube加载的缩略图。但至少数据不再传递到广告网络(例如 DoubleClick)。 YouTube 不会在您的网站上存储任何用户数据。


2
投票

是的,但这取决于你所说的“嵌入”是什么意思;据我在阅读完文档后得知,如果您想绕过使用 iframe API,您似乎有几个选择。您可以使用 javascript 和 flash API (https://developers.google.com/youtube/player_parameters) 嵌入播放器,但这涉及在代码中创建 Flash 对象(我个人避免这样做,但不一定是这样)你必须)。以下是 Youtube API 开发文档中的一些有用部分。

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

希望这有帮助!


有用:

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

使用 IFrame Player API 嵌入 IFrame

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

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

...

IFrame 使用标签嵌入

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

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

...

AS3 对象嵌入

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


0
投票

使用对象标签:

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

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


0
投票

是的,您可以通过两种方法在没有 Iframe 的情况下嵌入 YouTube 视频。

  1. 使用对象
  2. 使用嵌入标签

我已经在我的博客上详细解释了这一点,您可以阅读如何在没有 Iframe 的情况下嵌入 YouTube 视频

© www.soinside.com 2019 - 2024. All rights reserved.