CSS 動画を画面いっぱいに設置する方法 レスポンシブ対応

特徴

・レスポンシブ対応
・Javascriptなし
・動画を天地中央表示
・オーバーレイあり
・テキスト天地中央表示

デモ

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

HTML

<section class="hero">
  <div class="video-box overlay">
    <video class="video" muted autoplay loop>
      <source src="http://nowte.net/public/movie.mp4" type="video/mp4">
    </video>
  </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;
}
.video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* 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%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
h1 {
  font-family: Roboto;
  font-size: 60px;
  font-weight: bold;
  line-height: 1.2;
  padding: 0 50px;
  text-align: center;
  color: #fff;
}
  • このエントリーをはてなブックマークに追加

【続き】 作り方を知るの便利な使い方

新しい記事はありません