Question

我想在这里模仿Spotify的目标网页：https://www.spotify.com/uk/video-splash/?utm_source=spotify&utm_medium=web&utm_campaign=start

我对编码很新，但之前创建了一些着陆页，但从来没有以HTML和视频为背景。

我想要与Spotify相同的布局，没有滚动功能或声音。然后，我想能够点击按钮，并有一个人可以填写并提交的表格。不太清楚如何解决这个问题。

TLDR：

如何进行HTML5视频背景
创建JS弹出式窗体
从哪里获取视频/格式作为背景

Answer 1

HTML 5 WITH CSS FIX |没有Jquery需要或java

我继续为你设计了一些标记，所以至少你有一些东西可以开始。您可以复制此代码并使用它。你的CSS有一些关键点可以使用，请记住这一点，你会做得很好：

您的嵌入式视频必须具有最低的z-index

您的视频宽度必须设置为100％

你必须把！重要的权利放在100％

之后

您必须为所有＆＃34; divs＆＃34;

使用固定或绝对位置

如果不这样做，则无法在CSS中使用z-index选项

继续你的Mark Up＆amp;我希望这可以帮到你！

＆＃13;

/* YOUR CSS */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
#wrapper {
	position: absolute;
    top: 0;
    left: 0;
    border: 0;
    z-index: 1; /* <-- this plays a key roll for it to work */
    width: 100% !important /* <-- this plays a key roll for it to work */
    height: 100%;
	margin:0;
	padding:0;
}

/* Your can customize any div how ever you want this is just an example */
#login {
	position: absolute;
	z-index:2; /* <-- this plays a key roll for it to work */
	left:45%;
	top:60%;
	width:250px;
	height:100px;
	background-color: rgba(255,255,255,1.0);
	background: -webkit-linear-gradient(top, rgba(255,255,255,0.8), rgba(99,99,99,0.8)); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(top, rgba(255,255,255,0.8), rgba(99,99,99,0.8)); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(99,99,99,0.8)); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(99,99,99,0.8)); /* Standard syntax (must be last) */
	border-radius:7px;
}
#login a{
	color:#fff;
	text-decoration:none;
	font-size:30px;
}
#login p{
	padding-top:35px;
	padding-left:18px;
}
/* Your can customize any div how ever you want this is just an example */
#footer {
	position:fixed;
	bottom:0;
	width:100%;
	height:50px;
	background-color: rgba(0,0,0,0.8);
	z-index:3; /* <-- this plays a key roll for it to work */
}
#footer p{
	text-align:center;
	color:#fff;
	padding-top:10px;
}

＆＃13;

<html>
<body>
<!--Place your video right after the body tag-->
<!--Notice the id="wrapper" is placed in the <video id="wrapper"></video>-->
<video id="wrapper" autoplay loop ?wmode=transparent>
<source src="http://sectorvi.com/yourmovie.mp4" type="video/mp4">
</video>

<div id="login"><p><a href="#">JOIN FOR FREE</a></p></div>
<div id="footer"><p>Remember this will only work if you have fixed or absolute postions with enables you to use z-index. ~ Jonathan Bellavaro</p></div>
  

</body>
</html>

＆＃13;

你可以在这里查看：http://sectorvi.com/stackoverflow-funitect.html

希望这会给你一个良好的开端。

Answer 2

首先，这是使用YouTube→https://code.google.com/p/jquery-tubular/的 TLDR-jQuery-plugin-fix

BAM！你可以在那里成为dunzo，但是如果你想自己做reals，你可以使用视频标签＆amp;在它上面放置一个div，其中包含您的实际内容。

“如何进行HTML5视频背景？”

从标记开始。一些说明：

三种格式»MP4，OGV和WebM，每个HTML5视频编解码器一个
自动播放，循环播放，预加载»使用<video>属性
图像占位符属性poster会在视频加载期间显示图像，以防出现任何延迟。

所以你的标记会是这样的：

<video id="myVid" autoplay loop preload="auto" poster="/path/to/placeholder-image.jpg">
    <source src="myVideo.mp4" type="video/mp4" />
    <source src="myVideo.webm" type="video/webm" />
    <source src="myVideo.ogv" type="video/ogg" />
</video>

之后它就是所有的CSS。

重置<html>＆amp; <body>利润率＆amp;填充（probs已经处理，但以防万一）
设置<html>＆amp; <body>身高＆amp;宽度为100％并给它overflow:hidden
将<video>设置为min-height＆amp;最小宽度，所以宽高比可以改变（注意：你会在两边切掉一些视频，但它仍然是背景，所以没关系）

它是：

html, body{
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#myVid {
    min-width: 100%;
    min-height: auto;
}

有些人使用div而非编写规则<html>＆amp; <body>。那是你的电话。要点是：溢出隐藏必须在包含元素中，而视频总是具有最小宽度＆amp;高度100％。溢出将延伸到窗口（隐藏）之外，但浏览器不会留下任何间隙，空格或滚动条。

“像表单一样创建JS弹出窗口”

你要做的是创建一个JS模态。 Here's a tutorial。如果你认为tuts太长了＆amp;也许有点补救，去探索CodePen＆amp; GitHub是您正在寻找的例子。使用它们作为灵感来制作自己的，就像这一个→http://codepen.io/0leg/pen/faIKJ。不要忘记归属！

“从哪里获取视频/格式作为背景”

所以你现在有格式了。我建议环顾iStockPhoto和类似的网站。或者使用上面的jQuery插件。或者尝试 Video Hive ？

Answer 3

HTML5视频文档：http://www.w3schools.com/html/html5_video.asp

我建议使用类似inspector in Chrome的内容来查看他们的网页 - 您可以通过尝试了解他们的CSS / HTML代码然后根据您的用例进行调整来学习很多东西。

如何使用/ Video Background创建HTML5目标网页

3 个答案: