1
添付の画像に記載されているように、YouTubeのビデオをdivの「ボックス」（黒いもの、クリアする）、一部のテキスト）。
通常のYouTube埋め込み動画と同じように、視聴回数をカウントする必要があります。YouTubeの動画を反応的な「ボックス」divの背景として
実際のコードは次のとおりです（フルページを実行してください）。
ビデオを#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です。
イメージをビデオに置き換える必要があります。
多分これはhttp://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-widthを助ける – jakob
**注：** [マージンdisplay table-cellで使用することはできません]（http://stackoverflow.com/questions/16398823/why-is-a-div-with-display-table-cell-not-affected-by-margin） –