如何将 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 视频指定为 <video>
标签的 src
属性,而不是嵌入的 <iframe>
。
我希望制作一个没有播放器设计的 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&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
【讨论】:
以上是关于如何将 YouTube 视频添加为 <video> 而不是嵌入的 <iframe>?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Youtube API 为 Youtube 视频添加字幕?
如何将 YouTube 本地化(翻译)添加到我的 C# YouTube 视频上传器?