珍しくビデオネタです。
と言ってもCSSネタなんですけど。
という訳で、ビデオを背景に配置して全画面で表示するみたいな案件が来そうなので作ってみた。
正確に言うと背景としてではなく普通に配置してposition:fixedしだけの代物でそれなりに見えたので投稿。
videoの配置
<video autoplay loop>
<source src="img/orion.mp4">
</video>あまり使い慣れませんがvideoタグを使ってvideoを配置します。
全画面表示にする
video {
position: fixed;
top: 0;
left: 0;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
z-index: -1;
}こんな感じでposition:fixedしてサイズを100%にして出来上がりです。
まとめ
ずっと避けてたvidoeタグ使ってみましたけど、今度どこかでvideoタグについて書いてみます。
CSSで意外と簡単に出来るもんですね。
スマホになるとvideoはずして画像をスライドとかに変えたほうがいいのかな？
