ブックマーク / techmemo.biz (1)

  • CSSだけで全画面の背景動画を実装する方法 | TechMemo

    CSSだけで全画面の背景動画を実装する方法をご紹介いたします。ほぼコピペで実装できますので、サイトの背景に動画を表示したいとお考えの方は、ぜひ試してみてください。 なお、動画は別途ご用意いただく必要があります。 HTMLでは、videoタグで動画を設置します。記述する場所は、</body>の直前など、どこでも構いません。 <video autoplay loop poster="images/bg.png" id="video-background" muted> <source src="movie/bg.mp4" type="video/mp4"> </video> video要素に#video-backgroundを指定しておきます。 CSSでは、以下のように記述します。 #video-background { position: fixed; left: 0; top: 0; mi

    CSSだけで全画面の背景動画を実装する方法 | TechMemo
    mnbdyunan
    mnbdyunan 2018/02/28
  • 1