YouTube 视频作为响应式“盒子”div 背景

Question

如所附图片中所述，我需要在一个 div“框”（为清楚起见是黑色的）中的一些文本（“标题”）下设置一个 YouTube 视频。
当然，它仍然需要计算观看次数，就像普通的 YouTube 嵌入视频一样。

这是实际代码（运行完整页）。
我需要将视频放在#page00 框中。

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

html {
  margin: auto;
  height: 100%;
  width: 100%;
}

body {
  background: #fff;
  color: #222;
  font-family: Georgia, sans-serif;
  font-weight: 400;
  text-align: center;
  margin: auto;
  height: 100%;
  width: 60%;
  max-width: 1024px;
}

.container {
  display: table;
  margin: auto;
  margin-bottom: 20px;
  height: auto;
  width: 100%;
  background-position: center;
  background-size: cover;
}

.content {
  display: table-cell;
  margin: auto;
  vertical-align: middle;
}

.cover {
  background-color: #362f2d;
  color: #fff;
  height: 60%;
}

.snippet {
  background-color: #362f2d;
  color: #fff;
  height: 30%;
}

.hover .content {
  background-color: rgba(54, 47, 45, 0.25);
}

#page00 h1 {
  font-size: 70px;
  line-height: 125%;
}

#page00 h2 {
  font-weight: 400;
  line-height: 125%;
}

h1,
h2 {
  font-family: "Montserrat";
  text-transform: uppercase;
}

h1 {
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 100%;
}

h2 {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 250%;
}

p {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 150%;
  margin: auto;
  margin-bottom: 2%;
  width: 90%;
}

b {
  font-weight: 700;
}

a {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
}

.text {
  text-align: left;
}

img {
  width: 100%;
}

#menu .name {
  font-weight: 700;
}

#menu a {
  font-family: "Montserrat";
  font-size: 16px;
  font-weight: 400;
  margin: 1%;
  padding-bottom: 1%;
  padding-top: 5%;
}

#menu a:hover {
  color: inherit;
}

#menu a {
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
}

<div id="menu" class="container">
  <div class="content">
    <a href="#" class="name">Matteo Rizzo</a>
    <a href="#">menu 01</a>
    <a href="#">menu 02</a>
    <a href="#">menu 03</a>
  </div>
</div>

<!--- I need to put the video under this div v v v ---->

<div id="page00" class="container cover hover">
  <div class="content">
    <h1>Headline</h1>
    <h2>subtitle</h2>
  </div>
</div>

<div id="page01" class="container">
  <div class="content">

    <h2>Subtitle</h2>
    <p class="text">Lorem ipsum etcetera.</p>
  </div>
</div>

实际网址是http://matteorizzo.me.
我需要用视频替换图像。

Answer 1

编织： http://kodeweave.sourceforge.net/editor/#d230b9b3ddf5437ec3e9d7da128b5a18

编织： （针对您的样品）
http://kodeweave.sourceforge.net/editor/#8a72ed398f9d60ddd40576052ffeb4ac

Here is a Pure JS solution。它不使用 YouTube，但显示了这个概念。 （Dudley Storey）

要显示 YouTube 视频，我推荐使用插件 BigVideo.js 或 tubular（需要 JQuery）。不幸的是，截至 2015 年 12 月 30 日，BigVideo.js 项目不再处于积极开发中。

还有 this pen by Krz Szzz 使用 JQuery 和 YouTube API (another source) 将视频显示为 div 背景。

此外还有“Use any YouTube Video as your Page Background”。 （这种方法唯一的缺点是视频没有静音）

要以静音方式嵌入 YouTube 视频，请查看 How do I automatically play a Youtube video (IFrame API) muted?。

下面是一个快速模型，使用您提供的代码将 YouTube 视频显示为标题背景。如你所问。

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: $('.resetframe').height(),
    width: $('.resetframe').width(),
    playerVars: {
      autoplay: 1,
      loop: 1,
      controls: 0,
      showinfo: 0,
      autohide: 1,
      modestbranding: 1,
      vq: 'hd1080'},
    videoId: '_Gd8mbQ3-mI',
    events: {
      'onReady': onPlayerReady
    }
  });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(e) {
  e.target.playVideo();
  player.mute();
}

var done = false;
function stopVideo() {
  player.stopVideo();
}

$(window).on('load resize', function() {
  $('#player').css({
    'width' : $('.resetframe').width(),
    'height': $('.resetframe').height()
  })
  $('.heading').css('marginTop', - $('.resetframe').height())
})

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

/* Globals */
html, body {
  height: 100%;
}
h1, h2 {
  font-family: "Montserrat";
  text-transform: uppercase;
}

h1 {
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 100%;
}

h2 {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 250%;
}

p {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 150%;
  margin: auto;
  margin-bottom: 2%;
  width: 90%;
}

a {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
}

img {
  width: 100%;
}

body {
  color: #222;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  text-align: center;
  margin: auto;
  width: 60%;
  max-width: 1024px;
}

/* Navigation */
.nav a {
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
  font-family: "Montserrat";
  font-size: 16px;
  font-weight: 400;
  margin: 1%;
  padding-bottom: 1%;
  padding-top: 5%;
}
.nav a:hover {
  color: inherit;
}

.nav .name {
  font-weight: 700;
}

/* Classes */
.table {
  display: table;
  margin-bottom: 20px;
  width: 100%;
}
.cell {
  display: table-cell;
  vertical-align: middle;
}
.table p {
  text-align: left;
}

#page00 h1 {
  font-size: 70px;
  line-height: 125%;
}
#page00 h2 {
  font-weight: 400;
  line-height: 125%;
}

/* Specifics */
.resetframe {
  width: 100%;
}
.cover {
  position: relative;
  color: #fff;
  background: #000;
}
.heading {
  position: relative;
  display: block;
  background: #000;
  background: rgba(0, 0, 0, 0.25);
  padding-top: 1px;
}

/* variable classes */
.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="nav table">
  <div class="cell">
    <a href="#" class="name">Matteo Rizzo</a>
    <a href="#page00">Page 1</a>
    <a href="#page01">Penu 2</a>
    <a href="#">Penu 3</a>
  </div>
</div>

<!--- I need to put the video under this div ---->

<div id="page00" class="cover table">
  <img class="resetframe hide" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAACMCAYAAAANzXDRAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3gkdERMPpzeviAAAAMVJREFUeNrtwYEAAAAAw6D5U9/gBFUBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADPALyqAAGMiCoVAAAAAElFTkSuQmCC">

  <div id="player"></div>
  <div class="cell heading">
    <h1>Headline</h1>
    <h2>subtitle</h2>
  </div>
</div>

<div id="page01" class="table">
  <div class="cell">

    <h2>Subtitle</h2>
    <p>Lorem ipsum etcetera.</p>
  </div>
</div>