Question

我的网站上有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>

Answer 1

如果浏览器无法识别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>

Answer 2

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

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

Answer 3

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

如何在html视频代码中使用youtube视频

3 个答案: