Question

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

＆＃xA;＆＃xA;

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

＆＃xA;＆ #xA;

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

＆＃xA;＆＃xA;

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

＆＃xA;

Answer 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控制它。

Answer 2

我不知道是否可以不使用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>

Answer 3

您可以通过添加以下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>

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

3 个答案: