{"id":19438477,"url":"https://github.com/gottwik/video_cover","last_synced_at":"2026-01-31T07:02:01.901Z","repository":{"id":58228519,"uuid":"72760305","full_name":"Gottwik/video_cover","owner":"Gottwik","description":"Stretches video element to cover it's parent","archived":false,"fork":false,"pushed_at":"2016-12-01T10:00:41.000Z","size":989,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-26T09:58:54.585Z","etag":null,"topics":["jquery-plugin"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Gottwik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-03T15:38:11.000Z","updated_at":"2016-11-04T12:01:06.000Z","dependencies_parsed_at":"2022-08-31T09:20:35.703Z","dependency_job_id":null,"html_url":"https://github.com/Gottwik/video_cover","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gottwik%2Fvideo_cover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gottwik%2Fvideo_cover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gottwik%2Fvideo_cover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gottwik%2Fvideo_cover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gottwik","download_url":"https://codeload.github.com/Gottwik/video_cover/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gottwik%2Fvideo_cover/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259114467,"owners_count":22807244,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jquery-plugin"],"created_at":"2024-11-10T15:18:32.923Z","updated_at":"2026-01-31T07:01:56.881Z","avatar_url":"https://github.com/Gottwik.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\nCheck out the \u003ca href=\"https://gottwik.github.io/video_cover/\" target=\"_blank\"\u003eDEMO HERE\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"http://i.imgur.com/QAwiBJk.png\"\u003e\n\u003c/p\u003e\n\n## Why video_cover\nvideo_cover stretches video element to cover it's parent, essentially emulating `background-size: cover;` for `video` elements.\n\n## Installation\n\nInstall video_cover by bower:\n\n```\nbower i video_cover -S\n```\n\n## Usage\nThere are two ways to use video_cover: **CommonJS** module and **jQuery** plugin.\n\n### CommonJS\n```js\nrequire(['video_cover'], function (video_cover) {\n\tvideo_cover.cover($('video'))\n})\n```\n\n### jQuery plugin\nOther option is to just include video_cover library using a `\u003cscript\u003e` tag and just call the **video_cover** function on any jquery object:\n```html\n\u003cscript type=\"text/javascript\" src=\"/assets/vendor/jquery/dist/jquery.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"/assets/vendor/video_cover/video_cover.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n\t$('video').video_cover()\n\u003c/script\u003e\n```\n\n## Pure css approach\nvideo_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:\n```css\n.parent-element-to-video {\n    overflow: hidden;\n}\nvideo {\n    height: 100%;\n    width: 177.77777778vh; /* 100 * 16 / 9 */\n    min-width: 100%;\n    min-height: 56.25vw; /* 100 * 9 / 16 */\n}\n```\nCredit goes to @quertman's answer at SO: http://stackoverflow.com/a/29997746/4742670\n\nThis approach works flawlessly if you know the aspect ratio of your video and you are trying to fill the whole screen(full background).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgottwik%2Fvideo_cover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgottwik%2Fvideo_cover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgottwik%2Fvideo_cover/lists"}