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

时间：2016-05-07 18:37:40

标签： html css video youtube responsive

如附图中所述，我需要在某个文字（“标题”）下的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 我需要用视频替换图像。

the actual page

1 个答案:

答案 0 :(得分：0)

编织： 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>

相关问题
最新问题