Javascript youtube视频作为网站背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6501028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
youtube video as web site background
提问by b0x0rz
is there a way to embedd youtube video as a background of a web page with html, css and javascript with the actual site content on top? how?
有没有办法将 youtube 视频作为网页的背景嵌入 html、css 和 javascript，并将实际网站内容放在顶部？如何？
basically, it should be a video that auto plays, is muted (but the volume can be turned up by the visitor) and the site should work well being on top of it (the site is minimal so most of the video should be visible at all times). the site is minimal enough that no scroll bars would be visible by default in most browsers and the video should be 100% width and height.
基本上，它应该是一个自动播放的视频，静音（但访问者可以调高音量）并且该网站应该在它之上运行良好（该网站很小，因此大部分视频应该在一直）。该站点足够小，默认情况下在大多数浏览器中都看不到滚动条，并且视频应为 100% 宽度和高度。
examples? links?
例子？链接？
tried Google but couldn't find it.
尝试过谷歌但找不到它。
also it should work for videos not on youtube.
它也应该适用于不在 youtube 上的视频。
html5 and css3 preferred :)
首选 html5 和 css3 :)
I REALLY NEED A LIVE EXAMPLE SOMEWHERE (or as close to) because i tried it all (as available via google and failed)
我真的需要在某处（或接近）的现场示例，因为我尝试了所有方法（可通过谷歌获得但失败了）
also, related - there doesn't seem to be (as per my own research) any way of slowing down the play of youtube videos (for example: 24 times slower) - true / false?
此外，相关 - 似乎（根据我自己的研究）没有任何方法可以减慢 YouTube 视频的播放速度（例如：慢 24 倍） - 对/错？
采纳答案by sirbrialliance
There are two waysto answer this question:
有两种方法可以回答这个问题：
Set the flash player's wmode to transparent, put it in an absolute div with a low z-index. Put the content in another absolute div with a higher z-index.
Don't do it. Seriously. Don't put a movie behind the site's main content. You are aliening your customer base, making the site hare to view and read, and violating about a dozen or two other guidelines in good site design. Why not put the video inside the flow of the document where it belongs instead?
将 Flash 播放器的 wmode 设置为透明，将其放在 z-index 低的绝对 div 中。将内容放在另一个具有更高 z-index 的绝对 div 中。
不要这样做。严重地。不要在网站的主要内容后面放电影。您正在疏远您的客户群，使站点变得难以查看和阅读，并且违反了良好站点设计中的其他一打或两个准则。为什么不把视频放在它所属的文档流中呢？
回答by DBUK
You have probably found a solution by now but just in case you haven't...have you tried http://www.seanmccambridge.com/tubular/?
您现在可能已经找到了解决方案，但以防万一您还没有……您是否尝试过http://www.seanmccambridge.com/tubular/？
回答by Gibbo
<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
http://www.labnol.org/internet/youtube-video-background/27933/
http://www.labnol.org/internet/youtube-video-background/27933/
回答by phillchill
for completeness sake adding http://okfoc.us/okvideo/here. Also does Vimeo.
为了完整起见，请在此处添加http://okfoc.us/okvideo/。Vimeo 也是。
回答by Florian Chapon
you got this library as well:
你也有这个库：
http://florian-chapon.fr/dev/youtube-background/
http://florian-chapon.fr/dev/youtube-background/
the only thing you have to do, is include the js file, and put this script on your "body":
您唯一要做的就是包含 js 文件，然后将此脚本放在您的“主体”上：
$(document).ready(function() {
ytbg("vQWlNALvbhE", 0, 17, 1);
});
As an explanation:
作为解释：
ytbg("video link", starttime, endtime, volume).
回答by Nathan Romano
Well you could absolute position the tag or the , use CSS to set the height and width. Use javascript to simulate clicking on the button. set the element zIndex to the background.
好吧，您可以绝对定位标签或 ，使用 CSS 设置高度和宽度。使用 javascript 模拟点击按钮。将元素 zIndex 设置为背景。
回答by Danny Rhymes
Hi, as tubular is quite suffisticated, i extracted the necessary code for you.
html code:
嗨，由于管状已经足够了，我为您提取了必要的代码。
html代码：
<div id="player-container" style="overflow: hidden; position: absolute; width: 100%; height: 100%;">
<div id="player" style="position: absolute">
</div>
here comes the complete youtube API cover style stuff, extracted from tubular. jquery is needed. Also the standard youtube html5 iframe api code must be included - as given here: https://developers.google.com/youtube/iframe_api_reference#Getting_Started
这里是完整的 youtube API 封面风格的东西，从管状中提取出来。需要jquery。还必须包含标准的 youtube html5 iframe api 代码 - 如下所示：https: //developers.google.com/youtube/iframe_api_reference#Getting_Started
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
}
}
