Question

有没有办法将youtube视频作为网页背景嵌入html，css和javascript，并将实际网站内容放在首位？如何？

基本上，它应该是一个自动播放的视频，静音（但访问者可以调出音量）并且网站应该可以正常运行（网站很小，因此大部分视频应该随时可见）。网站足够小，默认情况下在大多数浏览器中都不会显示滚动条，视频应该是100％的宽度和高度。

例子？链接？

尝试了Google，却找不到它。

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

html5和css3首选：）

我真的需要一个实际的例子（或接近），因为我尝试了所有（通过谷歌可用并失败）

另外，相关 - 似乎没有（根据我自己的研究）减慢youtube视频播放的任何方式（例如：慢24倍） - 是/否？

Answer 1

你现在可能已经找到了一个解决方案，但万一你没有......你试过http://www.seanmccambridge.com/tubular/吗？

Answer 2

<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/

Answer 3

为了完整起见，在此添加http://okfoc.us/okvideo/。 Vimeo也是。

Answer 4

你也有这个图书馆：

http://florian-chapon.fr/dev/youtube-background/

你唯一需要做的就是包含js文件，并把这个脚本放在＆＃34; body＆＃34;上：

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

作为解释：

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

Answer 5

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

Answer 6

有two ways来回答这个问题：

将flash播放器的wmode设置为透明，将其放入具有低z-index的绝对div中。将内容放在具有更高z-index的另一个绝对div中。
不要这样做。认真。不要把电影放在网站的主要内容背后。您正在改变您的客户群，使该网站需要查看和阅读，并且在良好的网站设计中违反了大约十二个其他指南。为什么不将视频放在文档所在的流程中呢？

Answer 7

嗨，因为管状非常有用，我提取了必要的代码   对你而言。

html代码：

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

这里提供了完整的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

     }

 }

youtube视频作为网站背景

7 个答案: