Javascript youtube视频作为网站背景

有没有一种方法可以将youtube视频嵌入到带有html、css和javascript的网页背景中，并将实际的网站内容放在上面？怎么做

基本上，它应该是一个自动播放的视频，是静音的（但音量可以被访问者调大），并且网站应该在上面运行良好（网站是最小的，所以大部分视频应该在任何时候都可见）。该网站是最小的，在大多数浏览器中默认情况下没有滚动条可见，视频应该是100%的宽度和高度

例子？链接

我试过谷歌，但找不到

它也应该适用于不在youtube上的视频

首选html5和css3:）

我真的需要某个地方（或尽可能接近）的一个实例，因为我尝试了所有的方法（通过谷歌提供，但失败了）

---

此外，相关-似乎没有任何方法（根据我自己的研究）减缓youtube视频的播放速度（例如：慢24倍）-对/错？

您可以绝对定位标签或，使用CSS设置高度和宽度。使用javascript模拟单击按钮。将元素zIndex设置为背景

回答这个问题的方法有：

将flash播放器的wmode设置为transparent，将其放在具有低z索引的绝对div中。将内容放在另一个z索引较高的绝对div中

不要这样做。认真地不要在网站的主要内容后面放电影。你正在扩大你的客户群，使网站更易于查看和阅读，并且在良好的网站设计中违反了十几条其他准则。为什么不把视频放在它所属的文档流中呢

---

到目前为止，您可能已经找到了解决方案，但以防万一您还没有……您尝试过吗？

//将ID替换为YouTube视频的实际ID

---

为了完整起见，在此处添加。维梅奥也是

您好，因为Turbulate已经足够复杂了，所以我提取了必要的代码 给你

html代码：

下面是完整的youtube API封面风格资料，摘自 管状的。jquery是必需的。还有标准的youtube html5 iframe api 必须包括代码-如下所示：

var比率=16/9；
window.onPlayerReady=函数（e）{
调整大小（）；
}
$（窗口）.on（'resize'，函数（）{
调整大小（）；
})
var resize=函数（）{
console.log（“调整大小”）；
var高度校正=0，
宽度=$（窗口）.width（），
pWidth，//播放器宽度，待定义
高度=$（窗口）.height（）-高度校正，
pHeight，//球员身高，待定
$videoPlayer=$（“#player”）；
如果（宽度/比率<高度）{//如果新视频高度<窗口高度（下方间隙）
pWidth=Math.ceil（高度*比率）；//获取新播放器宽度
$videoPlayer.width（pWidth）.height（height）.css({
左：（宽度-宽度）/2，
排名：0
})；//播放器宽度更大，向左偏移；重置顶部
}else{//新视频宽度<窗口宽度（右侧间隙）
pHeight=Math.ceil（宽度/比率）；//获取新玩家的高度
$videoPlayer.width（宽度）.height（高度）.css({
左:0,，
顶部：（高度-pHeight）/2
})；//播放器高度更大，偏移顶部；重置为左侧
}
}

您还获得了此库：

您需要做的唯一一件事是包含js文件，并将此脚本放在“body”上：

作为解释：

ytbg("video link", starttime, endtime, volume).

---

哦，天哪，动画背景又回来了！！X-D对不起，我假设你有一个很好的理由我认为最大的问题是flashplayer可能总是位于某些浏览器中的任何内容之上。我不确定在最新版本中会出现多少问题，但它曾经是。lmao，yeah:P问题是，该网站非常小，而且对该点而言，背景中的视频-默认情况下静音（甚至可能是永久性的）是为了在使用该网站时提供一些“魅力”——因为人们会在该网站上出现很多。当然，所使用的视频将被仔细选择，以免太分散注意力或使内容看不见：PCheck my iFrameless/JS/CSS-only solution here love the link；）我想你只能相信我了——那会很棒；）当我打开声音时，我感觉很棒。可以设置视频质量吗？像视频总是加载在hd720？

<div id="player-container" style="overflow: hidden; position: absolute; width: 100%; height: 100%;">
            <div id="player" style="position: absolute">
</div>

 var ratio = 16 / 9;
 window.onPlayerReady = function (e) {
     resize();
 }

 $(window).on('resize', function () {
     resize();
 })

 var resize = function () {
     console.log("resize");

 var heightcorrection = 0,
         width = $(window).width(),
         pWidth, // player width, to be defined
         height = $(window).height() - heightcorrection,
         pHeight, // player height, tbd
         $videoPlayer = $('#player');        

     if (width / ratio < height) { // if new video height < window height (gap underneath)
         pWidth = Math.ceil(height * ratio); // get new player width
         $videoPlayer.width(pWidth).height(height).css({
             left: (width - pWidth) / 2,
             top: 0
         }); // player width is greater, offset left; reset top  

     } else { // new video width < window width (gap to right)
         pHeight = Math.ceil(width / ratio); // get new player height
         $videoPlayer.width(width).height(pHeight).css({
             left: 0,
             top: (height - pHeight) / 2 
         }); // player height is greater, offset top; reset left

     }

 }

$(document).ready(function() {  
    ytbg("vQWlNALvbhE", 0, 17, 1);
});

ytbg("video link", starttime, endtime, volume).