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

时间:2016-06-13 12:42:58

标签: html video youtube html5-video youtube-iframe-api

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

&#xA;&#xA;

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

&#xA;& #xA;

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

&#xA;&#xA;

您有任何想法或解决方案吗?

&#xA;

3 个答案:

答案 0 :(得分: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" height="100%" width="100%" 
    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控制它。

答案 1 :(得分:0)

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

打开Youtube视频。点击分享。点击嵌入。点击显示更多。取消选中“显示播放器控件”,“显示视频节目和播放器操作”和“视频播放完成时显示建议的视频”。复制Iframe代码。

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

示例:

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

答案 2 :(得分:0)

您可以通过添加以下CSS来使iframe响应,这应该比您尝试的方法更容易。

如果您想要一个具有自定义外观的播放器,您可以使用使用API​​的youtube Data API OR 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 width="560" height="315" src="https://www.youtube.com/embed/0afZj1G0BIE" frameborder="0" allowfullscreen></iframe>
</div>
<br>
    <div class="video-container">
           <iframe width="560" height="315" src="https://www.youtube.com/embed/0afZj1G0BIE" frameborder="0" allowfullscreen></iframe>
    </div>
</div>