https://github.com/gottwik/video_cover
Stretches video element to cover it's parent
https://github.com/gottwik/video_cover
jquery-plugin
Last synced: 4 months ago
JSON representation
Stretches video element to cover it's parent
- Host: GitHub
- URL: https://github.com/gottwik/video_cover
- Owner: Gottwik
- Created: 2016-11-03T15:38:11.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-12-01T10:00:41.000Z (over 9 years ago)
- Last Synced: 2025-05-26T09:58:54.585Z (about 1 year ago)
- Topics: jquery-plugin
- Language: HTML
- Size: 966 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Check out the DEMO HERE
## Why video_cover
video_cover stretches video element to cover it's parent, essentially emulating `background-size: cover;` for `video` elements.
## Installation
Install video_cover by bower:
```
bower i video_cover -S
```
## Usage
There are two ways to use video_cover: **CommonJS** module and **jQuery** plugin.
### CommonJS
```js
require(['video_cover'], function (video_cover) {
video_cover.cover($('video'))
})
```
### jQuery plugin
Other option is to just include video_cover library using a `` tag and just call the **video_cover** function on any jquery object:
```html
<script type="text/javascript" src="/assets/vendor/jquery/dist/jquery.js">
$('video').video_cover()
```
## Pure css approach
video_cover uses javascript to calculate optimal size and position of the video so that the container is covered. For some cases, javascript is not really required and the same effect can be achieved much more efficiently using pure css:
```css
.parent-element-to-video {
overflow: hidden;
}
video {
height: 100%;
width: 177.77777778vh; /* 100 * 16 / 9 */
min-width: 100%;
min-height: 56.25vw; /* 100 * 9 / 16 */
}
```
Credit goes to @quertman's answer at SO: http://stackoverflow.com/a/29997746/4742670
This approach works flawlessly if you know the aspect ratio of your video and you are trying to fill the whole screen(full background).