HTML&CSSで動画をサイトに埋め込んで背景にするときの方法。

HTML5になって新しく使えるタグにvideoタグというものが存在します。

このタグは動画を再生することができるタグとなっており、設置するだけでHTMLを開いた時に動画を再生してくれます。

これだけ。動画の形式はブラウザによって再生できるものが違うので、基本的にはmp4,ogvを作って配置しておけばOKです。
実際にこのタグを使って作った例がこちら。

参考リンク：太陽舗道株式会社

でこのコードを使って全面背景にする方法の一つとしてはCSSで指定する方法があります。
先ほどのvideoタグに対してクラス名を設けて、そこに下記のCSSを指定します。

.value_1 {

    width: auto;

    height: auto;

}

これを指定しておくことで背景として横幅一杯に表示されます。
逆に指定してかないと動画の原寸サイズが出てしまうので、画面より小さい場合は横が空白となってしまいます。

更にこの動画の上には文字が上に載っているのですが、それはvideoタグの前にimgタグをおいてそこにabsoluteをかけています。

.absolute {

    position: absolute;

    left: 44%;

}

正直leftで中途半端な数を指定することが果たして正解なのかどうかわかりません。
背景に動画をポイント的に置くデザインはかなり印象度も高いので、videoタグをもうちょっと研究して使いこなせうようになりたいと思います。

最新投稿された記事はいかがですか？

• 南野どうなる?2015年冬から4大リーグにいったザルツブルクの選手をリストアップ！
• 毎日25分のオンライン中国語レッスンサイトまとめ。結構サイトによって金額と時間が違ってます。
• 中国語で覚えておきたい接続詞まとめ。
• [サッカーまとめ]2007-2016に欧州のクラブチームに移籍して日本人選手リスト。