【jQuery】動画を背景にフルスクリーンで表示させる「covervid.js」

Webデザイン

2015/05/25 2023/01/22

フルスクリーンで表示させ、ブラウザサイズを変更しても縮尺してくれるjQueryプラグインcovervid.js。800bytesと軽量で便利なプラグインです。

covervid.min.js

Githubに公開されてますのでファイル一式をダウンロードしてください。

Github – covervid

使い方はjqueryとダウンロードした「covervid.min.js」を</body>の直前に読み込ませます。

Java File

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="covervid.min.js"></script>

あとはhtmlとCSSを記述して完成です。

html

<div class="covervid-wrapper">
    <video class="covervid-video" autoplay loop poster="img/video-fallback.png">
        <source src="videos/video.webm" type="video/webm">
        <source src="videos/video.mp4" type="video/mp4">
    </video>
</div>

css

.covervid-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

covervid

＼ Webデザインに関するお役立ち情報を定期的に配信中／

Follow @webclips_jp