HTML
CSS
Web

[HTML/CSS/WEB] 画面の動画をModernスタイルにしてみた。

最近プロジェクトのウェブサイトを一人で作ってます。
自分一人で勉強しながら、作ってるので満たないと思います。(笑)

最近の悩み。

1.どうやって作ったら人によく見えるのか
2. 老人さん達も見やすいウェブサイトをどうやって作ったらよいのか。

今回は?

今回はまだ作ってるサイトの部分を使用者がアクセス不可能にするために、
何か工事中だと表示する必要がありました。

HTML

私はイメージより動画を再生したかったです。

sample.html
<div class="container">
  <video autoplay muted loop>
      <source src="video/your video.mp4" type="video/mp4">
  </video>
</div>
  1. autoplay : 自動で再生してくれる。
  2. muted:サウンドなしにする。
  3. loop:動画を一度回して止まらないにする。

動画の上に表示する文句が必要でした。

sample.html
<div class="overlay">
  <h1><span>Comming</span>Soon...</h1>
</div>

CSS

style.css
body,
html {
    width: 100%;
    height: 100%;
    background-size: cover;
    font-family: 'Montserrat', sans-serif;
}
.container {
    width: 100%;
    height: 100%;
    background: #2c3e50B3;
    z-index: 1;
}
.container video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}
.overlay h1{
    position:absolute;
    z-index:1;
    color: white;
    font-size: 60px;
    font-weight: 900;
    text-transform: uppercase;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Montserrat', sans-serif;
}

結果。

Demo

image.png

終わりに

難しいかなと思ったwebもどんどん楽しくなってます。

Dreamwalker