如何将 YouTube 视频添加为 <video> 而不是嵌入的 <iframe>？答案

【问题标题】：How to add YouTube video as <video> instead of an embedded <iframe>?如何将 YouTube 视频添加为 <video> 而不是嵌入的 <iframe>？
【发布时间】：2016-10-13 21:30:54
【问题描述】：

我必须在网站上插入全宽视频。

由于重量和设计问题，我想知道是否可以将 YouTube 视频指定为 <video> 标签的 src 属性，而不是嵌入的 <iframe>。

我希望制作一个没有播放器设计的 YouTube 视频，并尽可能兼容不同的设备（例如浏览器、智能手机、平板电脑）。

您有什么想法或解决方案吗？

【问题讨论】：

您应该选择一个答案或进一步指定您的问题。这是不礼貌的。

标签： html video youtube html5-video youtube-iframe-api

【解决方案1】：

据我所知，除了使用原始 YouTube 播放器（使用 iframe）之外，您无法以任何其他方式将视频嵌入网页。

您可以定位 iframe 以填充视口并让内容与其重叠，就像这篇文章建议的那样：http://www.labnol.org/internet/youtube-video-background/27933/?演示在这里：http://img.labnol.org/files/video-background.html

<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
  <iframe frameborder="0" height="100%" width="100%" 
    src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
  </iframe>
</div>

// Replace ID with the actual ID of your YouTube video

您也可以使用 YouTube API https://developers.google.com/youtube/iframe_api_reference 通过 Javascript 控制它。

【讨论】：

SO 上不允许仅链接答案。复制此处回答问题的相关代码。
@suyesh 你为什么用不相关的链接评论这个答案？

【解决方案2】：

您可以通过添加以下 CSS 来使 iframe 具有响应性，这应该比您尝试的方法更容易。

如果您想要一个具有自定义外观的播放器，您可以使用使用 API 的youtube Data API 或a JQuery plugin 编写自己的脚本

    <style>
    .outer-container{
        width:100%
    }
    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 35px;
        height: 0;
        overflow: hidden;
    }
    .video-container iframe {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    </style>

<div class="outer-container">
<div class="video-container">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/0afZj1G0BIE" frameborder="0" allowfullscreen></iframe>
</div>
<br>
    <div class="video-container">
           <iframe width="560" height="315" src="https://www.youtube.com/embed/0afZj1G0BIE" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

【讨论】：

【解决方案3】：

我不知道是否可以不使用 iframe。但是你可以改变很多 Youtube 播放器的设计。据我所知，应该与移动设备兼容。

只需打开 Youtube 视频。点击分享。单击嵌入。单击显示更多。取消选中“显示播放器控件”、“显示视频标题和播放器操作”和“在视频播放完毕时显示建议的视频”。复制 iframe 标记。

您可以手动更改 iframe 的宽度。

示例：

<iframe width="560" height="315" src="https://www.youtube.com/embed/xmhnNUotIaE?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

【讨论】：