Make your HTML5 video behave like a background cover image with this simple jQuery extension
CoverVid: HTML5 background videos
CoverVid is a simple jQuery extension that lets you use an HTML5 video as a cover-size background image on a website. It’s easy to use and scales to whatever the parent element is.
Demo Page: http://stefanerickson.github.io/covervid/
CoverVid
Make your HTML5 video behave like a background cover image with a simple jQuery extension. Very simple to use, just follow these few steps...
Drop the covervid.min.js file into your javascript folder and load it after jQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="covervid.min.js"></script>
It is important to note that the video you target will use its' parent element to scale. With that in mind, we will create some simple markup and add some base styling to size the videos' parent/wrapper element.
<div class="covervid-wrapper">
<video class="covervid-video" autoplay loop poster="img/video-fallback.png">
<source src="videos/clouds.webm" type="video/webm">
<source src="videos/clouds.mp4" type="video/mp4">
</video>
</div>
.covervid-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Now, we simply call the coverVid() function on the video element, passing through the native dimensions of the video.
$('.covervid-video').coverVid(1920, 1080);'프로그래밍 > Web' 카테고리의 다른 글
| [Framework] Web Starter Kit: Tools for multi-device development (0) | 2014.07.11 |
|---|---|
| [javascript] Intense Image Viewer: Fully full screen images (0) | 2014.07.10 |
| OuiBounce: A small modal library - Modal (0) | 2014.07.07 |
| Card: Friendlier credit card forms for your users (0) | 2014.07.07 |
| [framework] Kickoff: A responsive, scalable front-end framework (0) | 2014.05.30 |
