Question

我的HTML中有一个部分我要添加一个将在后台自动播放的视频，但我无法执行此操作。我在部分开始时添加了它但是没有添加它在后台而不是从顶部添加。

这是我要添加的iframe ..

<iframe width="100%" height="400" src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>

这是我的小提琴链接.. FIDDLE。

请帮我添加..

Answer 1

试试这个DEMO

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page With Youtube Video Background</title>
<style>
body{ margin:0px; background:#000; }
#bg_container{ height:500px; overflow:hidden; }
#bg{ width:100%; height:900px; }
#content{ position:absolute; top:0px; padding:30px; color:#FFF; text-shadow:#000 2px 2px; }
</style>
</head>
<body>
<div id="bg_container">
  <iframe id="bg" src="//www.youtube.com/embed/LuD3_umIxgw?autoplay=1&amp;controls=0&amp;loop=1&amp;showinfo=0&amp;modestbranding=1&amp;disablekb=1&amp;enablejsapi=1&amp;playlist=PLAYLIST_ID_HERE" frameborder="0"></iframe>
</div>
<div id="content">
  <h1>Web page with HD looping video background</h1>
  <h2>Using CSS the video is simply placed underneath our HTML content</h2>
</div>
</body>
</html>

Answer 2

你看过这个吗？： http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video

这是一个很棒的教程，下载文件。

为了让视频在后台，您必须在CSS中设置一些规则（例如，位置：固定）。适用于教程中<video>标记的内容可应用于<iframe>标记，但结果相同。

上帝运气，罗伊

Answer 3

快进到2019年。...链接已损坏：（

如何在部分背景中添加视频iframe

3 个答案: