# youtube-embed-helper
> It tries to provide a better user experience.
Latest version **1.0.9** (published 2020-05-27) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install youtube-embed-helper
pnpm add youtube-embed-helper
yarn add youtube-embed-helper
bun add youtube-embed-helper
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.9 |
| Published | 2020-05-27 |
| First published | 2020-05-26 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 52.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ömür Yanıkoğlu @hayatbiralem |
| Maintainers | hayatbiralem |
## Links
- npm: https://www.npmjs.com/package/youtube-embed-helper
- Repository: https://github.com/hayatbiralem/youtube-embed-helper
- Homepage: https://github.com/hayatbiralem/youtube-embed-helper#readme
- Issues: https://github.com/hayatbiralem/youtube-embed-helper/issues
- npm.io page: https://npm.io/package/youtube-embed-helper
## Recent versions
- 1.0.9 (latest) — 2020-05-27
- 1.0.8 — 2020-05-27
- 1.0.7 — 2020-05-27
- 1.0.6 — 2020-05-26
- 1.0.5 — 2020-05-26
- 1.0.4 — 2020-05-26
- 1.0.3 — 2020-05-26
- 1.0.1 — 2020-05-26
- 1.0.0 — 2020-05-26
## README
# Youtube Embed Helper
It tries to provide a better user experience with [YouTube Player API for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference).
## Browser Support
Tested on IE11 but it should work on IE10 too.
## File Sizes
- JS: `3.12kb` / `1.45kb` GZip
- CSS: `1.29kb` / `0.41kb` GZip
## Installation
With npm
```
npm i youtube-embed-helper -S
```
You can download the latest version or checkout all the releases [here](https://github.com/hayatbiralem/youtube-embed-helper/releases).
## Usage
### Browser
You can import this plugin into your project as follows:
```html
```
.. and you're ready to go.
### Webpack
If you want to import the plugin with your webpack build you can do it by:
```js
import "youtube-embed-helper";
```
and for styles in js:
```js
import "youtube-embed-helper/src/scss/youtube-embed-helper.scss";
```
and for styles in scss:
```scss
@import "~youtube-embed-helper/src/scss/youtube-embed-helper";
```
### Autoprefixer
You can change browser list in the package.json. Default settings are here:
```json
{
"browserslist": [
">0.01%"
]
}
```
### Refresh
You can process new dynamic contents by calling in browser:
```js
window.processYouTubeEmbedHelper();
```
or in Webpack:
```js
import processYouTubeEmbedHelper from "youtube-embed-helper/src/js/utils/process";
processYouTubeEmbedHelper();
```
Only new ones will be processed.
### Prefetch
If you want to prefetch an `.o-youtube-embed` element's iframe resource you can dispatch following event after initialization:
```js
el.dispatchEvent(el.prefetchEvent);
```
This will set `autoplay` to `0` and fetch youtube iframe in background. This way your visitors could play videos on mobile with just one click, not two.
## Examples
We could create `.o-youtube-embed__video`, `.o-youtube-embed__play` and `.o-youtube-embed__iframe` elements on the fly but why? If we create those directly in the html that would be more fast and configurable, right?
Also `.c-play` component class used for demo. You need to use your own icon class and styles. Also you can put your icon element(s) inside the `.o-youtube-embed__play` element.
### Lean + Automatic thumbnail from YouTube
```html
```
### Static caption + Manual thumbnail from YouTube
In this way Javascript don't touch the `background-image`.
```html
```
### Muted so maybe it could play on mobile at first click
This example also shows us that to override player params via `.o-youtube-embed__iframe` object's data attributes.
```html
```
### Pauses Automatically
When you use multiple video instance at the same page and when you try to play another video, currently playing video pause itself automatically.
### Summary
In short `.o-youtube-embed-helper` object will transform and produce your YouTube video with performance and support IE10+.
### Development
Clone this repo, go to the project directory and install dependencies with
```bash
npm install
```
and rebuild dist folder with
```bash
npm run dev
npm run prod
npm run build # alias of prod
```
or watch changes
```bash
npm run watch
```
## TODO
- [x] Add to the npm directory.
- [x] Add optional caption
- [ ] Add demo for original YouTube play icon
- [ ] Add custom events (consider this one)
- [ ] Catch "Your browser does not currently recognize any of the video formats available." error on Firefox and implement it in to the code
- [ ] Add optional ability to prefetch iframes when element is in viewport
## Contributors
- [Ömür Yanıkoğlu @hayatbiralem](https://twitter.com/hayatbiralem)
## Contributing
In lieu of a formal style guide, take care to maintain the existing coding style.
---
_Source: https://npm.io/package/youtube-embed-helper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._