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

Posted

技术标签:

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

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

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

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

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

【问题讨论】:

您应该选择一个答案或进一步指定您的问题。这是不礼貌的。 【参考方案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"   
    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   src="https://www.youtube.com/embed/0afZj1G0BIE" frameborder="0" allowfullscreen></iframe>
</div>
<br>
    <div class="video-container">
           <iframe   src="https://www.youtube.com/embed/0afZj1G0BIE" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

【讨论】:

【参考方案3】:

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

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

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

示例:

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

【讨论】:

以上是关于如何将 YouTube 视频添加为 <video> 而不是嵌入的 <iframe>?的主要内容,如果未能解决你的问题,请参考以下文章

如何使视频描述在点击时处于活动状态?

如何使用 Youtube API 为 Youtube 视频添加字幕?

如何将 YouTube 本地化(翻译)添加到我的 C# YouTube 视频上传器?

为 Youtube 视频添加自定义播放按钮

如何将占位符图像添加到嵌入的 Vimeo 和 Youtube 视频中?

如何使添加到 iframe 中的 youtube 视频可访问?