CSS Youtube埋め込み動画を画面いっぱいのフルスクリーンで表示する

キービジュアルでよく使用されるYoutube動画を画面いっぱいに表示するデザインをCSSを使って実装する方法を紹介します。

デモ

See the Pen
CSS – Hero Movie Youtube (Overlay＆Text) by kura (@kuranopen)
on CodePen.

HTML

<section class="hero">
  <div class="video-box overlay">
    <iframe class="youtube-video" width="720" height="405" src="https://www.youtube.com/embed/DDU-rZs-Ic4?autoplay=1&playsinline=1&mute=1&controls=0&loop=1&playlist=DDU-rZs-Ic4" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="text-box">
    <h1>Hero Movie<br>Overlay Text</h1>
  </div>
</section>

CSS

/* wrap */

.hero {
  position: relative;
}

/* video */

.video-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  z-index: -100;
}
.youtube-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  min-width: 1920px;
  min-height: 100%;
  transform: translate(-50%, -50%);
  z-index: -100;
}

/* overlay */

.overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.4);
}

/* text */

.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  z-index: 100;
}
h1 {
  position: relative;
  font-family: Roboto;
  font-size: 60px;
  font-weight: bold;
  line-height: 1.2;
  padding: 0 50px;
  text-align: center;
  color: #fff;
}

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選