html - YouTube视频作为自适应 “box” 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>