如何在 html 视频标签中使用 youtube 视频答案

【问题标题】：how to use youtube video in html video tag如何在 html 视频标签中使用 youtube 视频
【发布时间】：2017-05-29 05:37:28
【问题描述】：

我的网站有 youtube 视频，我想在 HTML5 的视频标签中显示这些视频。是否可以将 youtube 的 iframe 标签嵌入到视频标签中？

<div class="col-md-6">
   <video class="video_link" width="320" height="240" controls="controls" id="3"> 
      <source src="" type="video/mp4" />
   </video>
</div>

【问题讨论】：

你为什么不使用 youtube 给你的嵌入框架？不行吗？

标签： javascript html video youtube

【解决方案1】：

转到该视频并单击共享按钮，您将嵌入视频链接。只需复制并粘贴到您想要的位置即可。

<iframe width="560" height="315" src="https://www.youtube.com/embed/QBpz2fu10eY" frameborder="0" allowfullscreen></iframe>

【讨论】：

【解决方案2】：

如果浏览器无法识别 HTML5 视频标签，则可以上传 Flash swf 文件并在嵌入标签中的 src 属性中指向该文件，该标签嵌入在视频标签中。

<video width="{#}" height="{#}" controls>
  <source src="{ogg_file}.ogg" type="video/ogg" />  
  <source src="{mp4_file}.mp4" type="video/mp4" />  

  <!-- The fallback in case the browser doesn't recognize the HTML5 video tag -->  
  <embed src="{flash_swf_file}.swf" type="application/x-shockwave-flash" width="{#}" height="{#}"></embed>  
</video>

iframe 标记在现有页面中加载页面。也许他们希望将视频放在 iframe 标签指定的单独页面上。每当您使用 iframe 时，请考虑在 CSS 文件中使用此代码，否则某些浏览器会显示 iframe 所在的框线。

iframe[seamless] {
    background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
    overflow: hidden;
}

为了使 CSS 代码正常工作，必须在开始 iframe 标记的末尾包含无缝。

<div><iframe src="{page_name}.html" height="{#}" width="{#}" seamless></iframe></div>

【讨论】：

【解决方案3】：

<iframe class="youtube-player" type="text/html" width="640" height="385"
  src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>

【讨论】：