{"id":24353815,"url":"https://github.com/tkloht/react-video-cover","last_synced_at":"2025-04-10T01:12:54.122Z","repository":{"id":8978288,"uuid":"60433300","full_name":"tkloht/react-video-cover","owner":"tkloht","description":"A small React component rendering a \u003cvideo/\u003e with object-fit: cover, or a Fallback if object-fit is not available.","archived":false,"fork":false,"pushed_at":"2022-12-09T17:10:32.000Z","size":25380,"stargazers_count":58,"open_issues_count":52,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-10T01:12:24.665Z","etag":null,"topics":["cover","ie","internet-explorer","object-fit","react","video"],"latest_commit_sha":null,"homepage":"http://tkloht.github.io/react-video-cover","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tkloht.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-04T22:40:57.000Z","updated_at":"2023-01-30T22:10:33.000Z","dependencies_parsed_at":"2023-01-13T15:15:22.988Z","dependency_job_id":null,"html_url":"https://github.com/tkloht/react-video-cover","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkloht%2Freact-video-cover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkloht%2Freact-video-cover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkloht%2Freact-video-cover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkloht%2Freact-video-cover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tkloht","download_url":"https://codeload.github.com/tkloht/react-video-cover/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248137891,"owners_count":21053775,"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":["cover","ie","internet-explorer","object-fit","react","video"],"created_at":"2025-01-18T16:21:49.432Z","updated_at":"2025-04-10T01:12:54.104Z","avatar_url":"https://github.com/tkloht.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Video Cover\nA small React component rendering a `\u003cvideo/\u003e` with `object-fit: cover`, or a Fallback if object-fit is not available.\n\n## Demo\n[http://tkloht.github.io/react-video-cover](http://tkloht.github.io/react-video-cover)\n\n## Installation\n```shell\nnpm install --save react-video-cover\n```\n\n## Basic Usage\nLet's say you have a video tag like this\n```html\n\u003cvideo src=\"golden-gate.mp4\" /\u003e\n```\nNow you want to display this video so that it always fills some container, while keeping the correct aspect ratio. For this example the container will be 300px by 300px:\n```js\n  \u003cdiv style={{\n    width: '300px',\n    height: '300px',\n    overflow: 'hidden',\n  }}\u003e\n    \u003cvideo src=\"golden-gate.mp4\" /\u003e\n  \u003c/div\u003e\n```\n\nWe can use [object-fit: cover](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) to let the video fill the container:\n```js\n\u003cdiv style={{\n  width: '300px',\n  height: '300px',\n  overflow: 'hidden',\n}}\u003e\n  \u003cvideo\n    style={{\n      objectFit: 'cover',\n      width: '100%',\n      height: '100%',\n    }}\n    src=\"golden-gate.mp4\"\n  /\u003e\n\u003c/div\u003e\n```\nThe only problem with this: [object-fit is not implemented by IE 11](http://caniuse.com/#feat=object-fit).\nIf you do not have to support IE, I would suggest that you stop right here.\nIf you want to get the same effect in IE, simply replace the video tag with the react-video-cover component:\n```js\n\u003cdiv style={{\n  width: '300px',\n  height: '300px',\n  overflow: 'hidden',\n}}\u003e\n  \u003cVideoCover videoOptions={{src: 'golden-gate.mp4'}} /\u003e\n\u003c/div\u003e\n```\nreact-video-cover will set width: 100% and height: 100% because I think these are sensible defaults. You can use the style prop to overwrite it.\n\nHere is the complete example, which also allows you to play/pause by clicking the video:\n\n```js\nimport VideoCover from 'react-video-cover';\n\nclass MinimalCoverExample extends Component {\n  render() {\n    const videoOptions = {\n      src: 'golden-gate.mp4',\n      ref: videoRef =\u003e {\n        this.videoRef = videoRef;\n      },\n      onClick: () =\u003e {\n        if (this.videoRef \u0026\u0026 this.videoRef.paused) {\n          this.videoRef.play();\n        } else if (this.videoRef) {\n          this.videoRef.pause();\n        }\n      },\n      title: 'click to play/pause',\n    };\n    return (\n      \u003cdiv style={{\n        width: '300px',\n        height: '300px',\n        overflow: 'hidden',\n      }}\u003e\n        \u003cVideoCover\n          videoOptions={videoOptions}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\nIt is also available as Example 3 on the demo-page.\n\n## Props\n\n### videoOptions\n**type:** Object  \n**default:** `undefined`  \nAll members of videoOptions will be passed as props to the \u003cvideo/\u003e.\n\n### style\n**type:** Object  \n**default:**  `undefined`  \n\nAdditional styles which will be merged with those defined by this component.\nPlease note that some styles are not possible to override, in particular:\n  - object-fit: cover (when the fallback is not used)\n  - position: relative and overflow: hidden (when the fallback is used)\n\n### className\n**type:** String  \n**default:**  `undefined`  \nUse this to set a custom className.\n\n### forceFallback\n**type:** Boolean  \n**default:**  `false`  \nThis component will use object-fit: cover if available, that is in all modern browsers except IE.\nThis prop forces use of the fallback. This is helpful during troubleshooting,\nbut apart from that you should not use it.\n \n### remeasureOnWindowResize\n**type:** Boolean  \n**default:**  `false`  \nIf set, an event listener on window-resize is added when the Fallback is used.\nIt will re-evaluate the aspect-ratio and update the styles if necessary.\nThis has no effect if the fallback is not used.\nThe classic example where it makes sense to use this is when using a background video.\nIf you need to react to different events to re-measure the aspect-ratio please see the onFallbackDidMount prop.\n\n### onFallbackDidMount\n**type:** Function  \n**default:**  `undefined`  \nWill be executed when the Fallback is mounted.\nThe only parameter is a function, which can be used to force a re-measuring, for example after the size of the surrounding container has changed.\nPlease note that this will only be invoked if the fallback is used, that is in IE.\nSee ResizableCoverExample for an example implementation.\n \n### onFallbackWillUnmount\n**type:** Function  \n**default:**  `undefined`  \nWill be executed before the Fallback unmounts.\nYou probably want to use this to clear any event-listeners added in onFallbackDidMount.\n\n\n## Development\nTo start a webpack-dev-server with the examples:\n```shell\nnpm start\n```\nThen open `http://localhost:3000/react-video-cover`\n\nTo build the examples:\n```shell\nnpm run build-examples\n```\nYou can find the results in `dist_examples`.\n\nTo build the Component as published to npm:\n```shell\nnpm run build\n```\nYou can find the results in `dist`.\n\n## Contact\nFind me on [Twitter](https://twitter.com/tkloht) or write me an [email](mailto:tobias.kloht@gmail.com).\nOf course you can also use Github issues or open a pull request.\n\nHonestly, it would be really great to know if anyone actually uses my little component. I'm also happy to help if you run into any problems.\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftkloht%2Freact-video-cover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftkloht%2Freact-video-cover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftkloht%2Freact-video-cover/lists"}