What are the differences between using an HTML5 embedded video vs. an iframe with a YouTube link?

I'm debating whether or not to store a video on my server and call it through an HTML5 tag, or upload the video onto YouTube and use an iframe to embed the YouTube link. I'm not sure which would work more efficiently, or the differences between each one. What are the differences between using a HTML5 video tag and using a YouTube link and iframe tag?


Using a self-hosted video with HTML5


  1. Full Control over markup and interface


  1. Browser support is in your hands
  2. Video download will be slower on your server as compared to YouTube

Recommended Usage:

Use a javascript plugin like https://plyr.io/ which will help with cross-browser and responsive concerns. Serve the video from a CDN if possible

Youtube Hosted


  1. Performant
  2. Browser support is everything


  1. YouTube branded by default
  2. Little control over the interface

Recommended Usage: Use iframe embed code provided by youtube. For responsive assistance, see http://embedresponsively.com/. Also plyr.io allows you to play YouTube videos.

For my experience with <iframe> and <video> tags:

I found an issue with the <iframe> tag when you want to do an autoplay for your video while using a mobile or tablet device with "Chrome" & "Apple".

In my case, I used to do a click function to play video, that's what is impossible with <iframe> tag, so I use the <video> tag to resolve the issue.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

  • 在 HTML4 和 HTML5 中嵌入视频(Embeding a Video in HTML4 vs HTML5)
    问题 在寻找 HTML4 和 HTML5 之间的差异时,我发现了一点: HTML5 为网络世界带来了全新的维度。 它可以在网页上嵌入视频,而无需使用任何特殊软件,如 Flash 因此,如果我们考虑使用 HTML4 中的示例代码,那么对于嵌入视频,它将是: <embed src="MyVideo.mp4"/> 虽然上面的代码可以用 HTML5 写成: <video src="MyVideo.mp4"></video> 所以我能看到的只是语法差异。 除此之外还有什么区别。 这是否意味着如果我们将使用 HTML5 嵌入视频,那么浏览器将不会使用任何第三方软件来播放视频? 回答1 关于标签的想法是浏览器应该对它有原生支持,而不需要使用任何额外的软件。 该标准尚未准备就绪,未达成一致的观点之一是关于支持哪些编解码器。 有关更多信息,您可以查看 html5 视频 wiki 页面,其中包含哪些浏览器支持哪些格式的列表。 如果您计划实施 html5 视频标签,您应该提供向后兼容性。 一种方法是使用 VideoJS 库,如果浏览器不支持视频源,它将回退到 Flash。 回答2 当前的 HTML5 草案规范没有在 video 标签中指定浏览器应该支持哪些视频格式。 用户代理可以自由地支持他们认为合适的任何视频格式。 如果浏览器未内置解码器,则格式支持将由操作系统的多媒体框架决定。 回答3
  • 如何使用新的 YouTube iframe 样式代码嵌入高质量视频(How to embed high quality video with new YouTube iframe style code)
    问题 我正在使用 youtube 的新 iframe 代码来嵌入视频,但这些视频的质量似乎比我在 youtube 上观看的质量要低。 有没有办法嵌入高质量的视频? 我目前的代码是 <iframe title="YouTube video player" width="650" height="390" src="http://www.youtube.com/embed/6X3zUh8RqbY" frameborder="0" allowfullscreen></iframe> 回答1 &vq=hd720 或 &vq=hd1080 在其他所有方法都失败的情况下成功了 回答2 以下代码对我有用: <iframe width="241" height="136" src="https://www.youtube.com/embed/NMG0CMkuUnA?version=3&vq=hd720" frameborder="0" allowfullscreen></iframe> 回答3 此外,YouTube 现在似乎会自动提供它认为针对嵌入大小、iframe 和 AS3 优化的质量,无论是否设置了 HD 参数。 请参阅此帖子,以及此信息以获取更多信息。 更新:请参阅 Jason Renaud 的答案,了解一种允许明确强制质量类型的好方法。 我用嵌入 HTML5 的播放器尝试了它
  • 在 facebook 上使用 opengraph 嵌入 html5 视频(Embedding html5 video with opengraph on facebook)
    问题 我为我们的学生电视台建立了一个网站,其概念与 youtube 非常相似。 我们希望我们的视频在分享时可以直接在 Facebook 中播放,视频本身仍然托管在我们的服务器上,并且我们的统计数据正在更新。 网站上的播放器使用 videojs,并且都使用 html5 video 标签。 还有一个可在 iframe 中运行的播放器的可嵌入版本。 理想情况下,我希望在 facebook 上使用它,但认为这是不可能的。 这是我目前尝试将 og:video:type 值设置为 text/html 并将 og:video 设置为可嵌入播放器 url 的方法,但它似乎不起作用。 这是一个示例页面,这是它的可嵌入播放器。 我见过的唯一其他方法是指定视频文件的网址或 Flash 播放器的网址。 我们所有的视频都以不同的质量/分辨率呈现,在我们的网站和可嵌入播放器上,有一个质量选择栏可以更改播放器中的视频网址。 然而,对于 opengraph 和 facebook 来说,似乎无法为其提供不同质量的 url 或让用户在 facebook 上选择他们想要的那个,这意味着我们坚持强迫每个人观看其中一种质量。 这是正确的吗? 因此,似乎可用的唯一其他选项是构建一个内置质量选择的自定义 Flash 播放器。 据我所知,这就是 youtube 正在做的事情。 这是唯一的选择,因为我不想为 Facebook
  • Embeding a Video in HTML4 vs HTML5
    While searching for difference between HTML4 and HTML5 I came across the point that : HTML5 brings a whole new dimension to web world. It can embed video on web-pages without using any special software like Flash So if we will consider a sample code in HTML4 then for embeding video then that will be: <embed src="MyVideo.mp4"/> While the above code can be written in HTML5 will be: <video src="MyVideo.mp4"></video> So what can I see is just the syntax difference. Apart from that what else is the difference. Does this mean if we will use HTML5 to embed a video then the browser is not going to use
  • Licensed Content Doesn't Load in Embedded YouTube Player
    I've looked all over and can't find an answer to this question so I'm hoping someone here will know. I'm setting up a website that will embed the YouTube player using the Iframe API. In addition to watching unlicensed content, I'm also planning to watch licensed content (i.e. movies I rent from YouTube or Google Play). To test things out I copied the code from the YouTube Player API "Getting Started" page YouTube Iframe Player API. I then substituted in several different video ids to test out watching the video. When I got to licensed content I had mixed results. Of the four movies that I
  • 嵌入式 YouTube 播放器无法加载许可内容(Licensed Content Doesn't Load in Embedded YouTube Player)
    问题 我已经找遍了,找不到这个问题的答案,所以我希望这里有人会知道。 我正在建立一个网站,该网站将使用 Iframe API 嵌入 YouTube 播放器。 除了观看未经授权的内容,我还计划观看授权内容(即我从 YouTube 或 Google Play 租借的电影)。 为了进行测试,我从 YouTube Player API“入门”页面 YouTube Iframe Player API 复制了代码。 然后我替换了几个不同的视频 ID 来测试观看视频。 当我获得许可内容时,结果喜忧参半。 在我从 Google Play 租借的四部电影中,有两部播放正常,另外两部出错无法播放。 以下是每部电影的结果以及 YouTube 视频 ID: 成功播放 冰河时代:碰撞课程 (zaM7lVlLS5Y) 独立日:复兴 (Wr1xNdTzS1M) 没玩 BFG (wjxfiaZ1a4w) 皮特的龙 (Tg7tFqt0u4w) 我知道你在想什么,“独立日:复兴怎么可能被认为是成功的?”。 看完之后,我发现自己也想知道同样的事情,但它确实在我嵌入的 youtube Iframe 播放器中播放。 . . 如果你可以称之为成功。 对于 BFG 和 Pete's Dragon,HTML5 播放器和缩略图像正常一样加载到 Iframe 中,但是当我按下播放时,播放器切换到 Flash 播放器
  • 对 YouTube iframe 使用无缝和/或沙盒属性有什么意义吗?(Is there any point in using the seamless and or sandbox attribute for YouTube iframes?)
  • Embedding html5 video with opengraph on facebook
    I have built a web site for our student tv station and the concept is pretty similar to youtube. We would like for our videos to be playable directly in facebook when shared, with the videos themselves still hosted on our server and our stats being updated. The player on the site uses videojs and is all working with the html5 video tag. There is also an embeddable version of the player that can run in an iframe. Ideally I'd like this to be used on facebook but don't think it's possible. This is what I've attempted at the moment with the og:video:type value set to text/html and og:video set to
  • IOS Webview 中的 Youtube iFrame 播放器加载速度非常慢(Youtube iFrame player in IOS Webview loads very slowly)
  • 使用 Chrome 扩展内容脚本检测 youtube 视频事件(Detect youtube video events with Chrome extension content script)
    问题 我正在编写 Chrome 扩展程序,我想检测用户在 youtube.com 上观看视频时视频的开始/结束时间。 我的情况和我读过的其他教程之间的区别是我没有将自己的 youtube 视频嵌入到我自己的网站上,我只想检测用户在 youtube 上观看的视频中的事件。 现在我的 manifest.json 文件对于内容脚本有以下几行: "content_scripts": [ { "matches": ["http://*/*","https://*/*"], "js": ["js/jquery.js", "js/iframe_api.js", "js/contentScript.js"], "all_frames": true } ], 我下载了 jquery,iframe_api.js 是 https://www.youtube.com/iframe_api 的内容。 我的 contentScript.js 文件非常简单,我只想在视频准备好时将一些内容打印到控制台: function onYouTubeIframeAPIReady() { var player; player = new YT.Player('ytplayer', { events: { 'onReady': onPlayerReady, } }); } function onPlayerReady
  • 《响应式Web设计:HTML5和CSS3实战》-- 阅读笔记2
    文章目录 响应式网页设计中的 HTML51. 腻子脚本2. HTML5 的全新语义化元素1. 结构级语义元素2. 文本级语义元素 3. WAI-ARIA(无障碍网页应用技术)1. ARIA的地标角色 4. HTML5 中的 video1. 添加视频2. 提供备用的媒体源文件3. 为视频添加响应式 5. 离线 WEB 应用 响应式网页设计中的 HTML5 响应式设计的“移动优先”(mobile first)思想使它很适宜采纳 HTML5 中最简洁、最有效和最具语义的代码。 1. 腻子脚本 腻子脚本(polyfill)这个词由Remy Sharp提出,意指使用腻子来补平老版本浏览器的缺陷。因此,腻子脚本具体指的是一段能给老版本浏览器带来新特性的JavaScript代码。 IE9以前的老的浏览器不支持 HTML5 中提出的新特性。因此,JavaScript 专家 Remy Sharp 开发了一个轻量级的增强脚本,在HTML5网页中引入该文件后,就能神奇地让老版本IE支持新HTML元素。 更进一步地,Modernizr 出现了。除了能让IE支持HTML5新元素之外,它还能够基于一系列特性测试来有条件地加载更高级的腻子脚本(polyfill)、CSS 文件以及额外的 JavaScript 文件。 2. HTML5 的全新语义化元素 1. 结构级语义元素 <section>
  • Embedding video player html5 iframe in facebook share like YouTube
    When something is shared from youtube to facebook, facebook is now showing the youtube html5 player. If you look up one of their urls (https://www.youtube.com/watch?v=uuS5ZyQhvsk) in the open graph debugger you can see that they are now providing open graph meta data for their html player as well as the flash one. I also have a player that sits in an iframe, and am now including the same tags that youtube is, minus the flash ones as we don't have a flash player, but it isn't working and facebook is giving me this error which doesn't make sense: Share has playable media but will not play inline
  • 在没有iframe的情况下嵌入HTML5 YouTube视频?(Embed HTML5 YouTube video without iframe?)
    问题 是否可以在不使用iframe的情况下嵌入html5版本的youtube视频? 回答1 以下是不使用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
  • 将视频播放器html5 iframe嵌入到YouTube之类的Facebook共享中(Embedding video player html5 iframe in facebook share like YouTube)
    问题 当某东西从youtube共享到facebook时,facebook现在显示youtube html5播放器。 如果您在开放图调试器中查找他们的网址之一(https://www.youtube.com/watch?v=uuS5ZyQhvsk),您会发现他们现在正在为其html播放器以及闪一。 我也有一个位于iframe中的播放器,现在包含了与youtube相同的标签,减去了Flash标签,因为我们没有Flash播放器,但是它无法正常工作,facebook给了我这个错误,没有道理: 共享具有可播放的媒体,但不能内联播放,因为如果嵌入,它将引起混合内容警告。 添加secure_src或确保视频src安全以解决此问题。 这是facebook正在阅读的信息: 这是作为生成该错误的示例的URL:https://www.la1tv.co.uk/player/124/260 我所能想到的是,Facebook已经与youtube达成某种交易,但尚不为每个人都可以使用,但是从该错误中还无法确定。 我们网站上的所有内容均通过https提供。 任何人都知道发生了什么事或该工作正常了吗? 我在Facebook的任何地方都找不到如何执行此操作的文档。 一段时间之前,我曾尝试发布一个类似的问题,但此时youtube仍仅向Facebook提供Flash播放器。 似乎其他人在这里遇到了类似的问题。 回答1
  • 为什么 YouTube 在嵌入视频的 iframe 中放置了 type= 属性?(Why did YouTube put a type= attribute in iframe for embedded video?)
    问题 访问 YouTube 时,它​​会提供一个嵌入代码,例如 <iframe title="YouTube video player" class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/QRvVzaQ6i8A?rel=0"> </iframe> 请注意, type="text/html" 不是有效的 html。 iframe 标签没有这样的属性。 谁能解释为什么谷歌把那个? 我想这是出于某种实际原因,但我猜不出是什么。 PS,您可以通过访问此处获取嵌入代码 http://www.youtube.com/watch?v=QRvVzaQ6i8A 回答1 我想这是谷歌本身的错误。 我怀疑有错误。 它不是 HTML4 的一部分,也不是 HTML5 的一部分。 您可以放心地忽略它并将其删除。 关于类型属性主题:对象元素上的类型符合但已过时。 浏览器从未真正使用它来猜测所提供 URI 的内容。 回答2 这不是错误,它是 HTML5 Youtube Player 的嵌入代码。 在验证 HTML 时,您必须记住 HTML5 允许内容作者使用非标准元素和属性,并且文档应该仍然有效。 此外,变得足够流行的非标准标记可以被记录并成为 HTML5 规范的扩展
  • 如何在引导程序的中心对齐YouTube嵌入式视频(How can I align YouTube embedded video in the center in bootstrap)
    问题 我正在尝试在引导页面的页面中心对齐YouTube嵌入式视频。 视频的大小始终相同。 我的html看起来非常简单: <div class="video"> <iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe> </div> 我尝试了与stackoverflow不同的解决方案(该解决方案仅解决了div居中问题,而不是视频问题),而我能想到的最好的办法就是摆弄小提琴。 我已经尝试过solution1,solution2,solution3,但没有结果。 另一个部分成功的解决方案是使用: width: 50%; margin: 0 auto; 它在台式机上运行良好,但在iPad或手机上无法运行(视频部分超出了屏幕)。 如何在台式机/平板电脑/手机中将视频正确居中? 回答1 需要注意的重要一点/“ Bootstrap”只是一堆CSS规则 小提琴 的HTML <div class="your-centered-div"> <img src="http://placehold.it/1120x630&text=Pretend Video 560x315" alt="" /> </div>
  • Facebook在iframe中嵌入视频无法正常工作(Facebook embeded video with iframe not working)
    问题 我们曾使用iframe将Facebook视频嵌入到我们的网站中,之前运行良好,但是从最近几天开始该网站无法加载视频。 我们也尝试过使用简单的网页,但是没有运气。 下面是我们正在使用的代码 <iframe src="https://www.facebook.com/video/embed?video_id=video_id" width="650" height="400" frameborder="0" allowfullscreen></iframe> 请让我知道是否有人可以快速帮助您 回答1 只需使用此链接。 它为我工作。 “ http://www.facebook.com/video/embed?video_id=XXXXXXXXXXXXX”; 其中XXXXXXXX是您的Facebook视频ID。 例如:Facebook示例视频: <iframe src="http://www.facebook.com/video/embed?video_id=10152463995718183" frameborder="0" width="100%" height="100%"> 回答2 您需要立即使用此链接:) https://m.facebook.com/video/video.php?v=xxxxxxxx 古老的问题不是视频没有被嵌入,而是没有在iframe中被正确拉伸。
  • 嵌入式YouTube视频不会重播(Embedded YouTube videos won't replay)
    问题 奇怪的一个:嵌入式YouTube视频一旦播放(通过单击“播放”或在页面加载时自动播放),将无法再次播放。 我使用的是直接从YouTube复制的标准iFrame嵌入。 在几个不同的简短视频中,以及在我测试过的所有浏览器/操作系统组合中(Windows / Mac上的Chrome / Safari / Firefox / IE),都会发生这种情况。 这是代码: <iframe width="420" height="315" src="//www.youtube.com/embed/OuSdU8tbcHY" frameborder="0" allowfullscreen></iframe> 您可以在这个小提琴中看到它的实际效果。 回答1 因此,问题似乎与视频时长无关; Flash播放器有问题。 如果加载了Flash Player,并且根本没有用户与控件的交互,则当Flash Player结束时,它不会重新加载iframe(尽管事实是它引发了“视频结束”事件...当您尝试执行以下操作时:重新加载,它将不会发出正确的调用来重新加载视频,因此永远无法重新开始播放)。 您也可以测试更长的视频; 如果您开始观看它们并且不使用滚动条,它们将表现出相同的行为。 同样,在非常短的视频上,如果您开始播放然后稍稍擦一下(甚至是时间倒退),则会触发iframe重新加载(类似于
  • 将视频嵌入网页后,如何删除YouTube品牌?(How to remove youtube branding after embedding video in web page?)
    问题 我在用 <iframe width="550" height="314" src="https://www.youtube.com/embed/vidid?modestbranding=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe> 这将删除右侧底部的“ Youtube”徽标。 并且还删除了悬停时出现的“标题栏”。 但问题是,当我将鼠标悬停在视频上时,在右下方的“ Youtube”缩略图/文本后面,当我移开鼠标时,它消失了。 当我使用“ autohide = 1”时,控制栏将被隐藏,并且在右下角的悬停窗口上显示一个“ Youtube”图标/图像/徽标。 我在用 iframe.setAttribute("src", "youtube.com/embed/" + youtube.id + "?modestbranding=1&;showinfo=0&;autohide=1&;rel=0;"); 这个。 这样,我就可以从控制栏中删除/隐藏标题栏和徽标,但是在右下方,悬停屏幕上会出现另一个徽标,我应该使用哪个参数来隐藏它? 回答1 您可以在网址中添加?modestbranding=1 。 这将删除徽标。 适度品牌宣传(支持的播放器:AS3,HTML5)
  • iframe,嵌入和对象元素之间的区别(difference between iframe, embed and object elements)
    问题 HTML5定义了几个嵌入的内容元素,从鸟瞰的角度看,它们似乎在很大程度上是相同的。 iframe , embed和object之间的实际区别是什么? 如果我想从第三方网站嵌入HTML文件,我可以使用其中哪些元素,它们之间会有什么不同? 回答1 <iframe> iframe元素表示嵌套的浏览上下文。 HTML 5标准-“ <iframe>元素” 主要用于包含来自其他域或子域的资源,但也可以用于包含来自同一域的内容。 <iframe>的优势在于,嵌入式代码是“实时的”并且可以与父文档进行通信。 <embed> 在此之前,它是HTML 5的标准化标签,它是一个非标准标记,所有主流浏览器都实现了该标记。 HTML 5之前的行为可能会有所不同... embed元素为外部(通常为非HTML)应用程序或交互式内容提供集成点。 (HTML 5标准-“ <embed>元素”) 用于嵌入浏览器插件的内容。 SVG和HTML例外,它们根据标准进行了不同的处理。 嵌入内容可以做什么和不能做什么的细节取决于所涉及的浏览器插件。 但是对于SVG,您可以通过以下方式从父级访问嵌入式SVG文档: svg = document.getElementById("parent_id").getSVGDocument(); 在嵌入式SVG或HTML文档中,您可以通过以下方式到达父级: parent =