Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stefanerickson/covervid
Make your HTML5 video behave like a background cover image with this lightweight Javascript plugin / jQuery extension
https://github.com/stefanerickson/covervid
javascript jquery video
Last synced: about 1 month ago
JSON representation
Make your HTML5 video behave like a background cover image with this lightweight Javascript plugin / jQuery extension
- Host: GitHub
- URL: https://github.com/stefanerickson/covervid
- Owner: stefanerickson
- License: mit
- Archived: true
- Created: 2014-05-02T18:22:30.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T02:06:46.000Z (over 1 year ago)
- Last Synced: 2024-05-10T16:02:59.756Z (about 1 month ago)
- Topics: javascript, jquery, video
- Language: JavaScript
- Homepage:
- Size: 118 MB
- Stars: 1,051
- Watchers: 29
- Forks: 189
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-stars - covervid
- awesome-jquery - covervid - Make your HTML5 video behave like a background cover image with this lightweight Javascript plugin / jQuery extension (Images / Data Table)
- awesome-stars - covervid
- awesome - stefanerickson/covervid - Make your HTML5 video behave like a background cover image with this lightweight Javascript plugin / jQuery extension (JavaScript)
- awesome-stars - covervid
- awesome-stars - stefanerickson/covervid - `★1051` Make your HTML5 video behave like a background cover image with this lightweight Javascript plugin / jQuery extension (JavaScript)
README
CoverVid
========
#### ⚠️ This project is no longer maintained now that their is widespread support for the [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) and [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) CSS properties in modern browsers ⚠️At the core of CoverVid, is the idea of this little CSS snippet being possible...
```css
.selector {
background-video: url('../foo/bar.mp4 || ../foo/bar.webm');
background-size: cover;
background-position: center center;
}
```
Why is it special?
------------------
CoverVid is very lightweight, with only 800 bytes of Javascripts. It is usable in native Javascript and jQuery. Its' logic is parent based, meaning the parent element can be any size (Not necessarily just a full-screen background).How do I use it?
----------------
1. First pull the project down from GitHub, or install with bower runningbower install covervid
and linkcovervid.min.js
into your site. Make sure it is loaded after jQuery if using it.2. 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.
```html
```
```css
.covervid-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```3. Now, we would simply call
coverVid(Container-Element, Video-Width, Video-Height)
on the video element, passing through the native dimensions of the video. If you are using jQuery, we would call$('.covervid-video').coverVid(1920, 1080);
.