diff --git a/README.md b/README.md index bdd33ef..f6ee15b 100644 --- a/README.md +++ b/README.md @@ -20,13 +20,14 @@ - _new in v1.1_: Adds `nocookie` attr for use with use youtube-nocookie.com as iframe embed uri - _new in v1.2_: Adds `playlistid` for playlist loading interface support - _new in v1.3_: Adds `loading=lazy` to image placeholder for more perf with `posterloading` attr if you'd like to use eager +- _new in v1.4_: Adds `short` attr for enabling experimental YouTube Shorts mobile interaction support. See (example video)[https://www.youtube.com/watch?v=aw7CRQTuRfo] for details. -## Install +## Install via package manager This web component is built with ES modules in mind and is available on NPM: -Install code-block: +To install, use your package manager of choice: ```sh npm i @justinribeiro/lite-youtube @@ -45,7 +46,7 @@ import '@justinribeiro/lite-youtube'; If you want the paste-and-go version, you can simply load it via CDN: ```html - + ``` ## Basic Usage @@ -54,22 +55,33 @@ If you want the paste-and-go version, you can simply load it via CDN: ``` +## Playlist Usage + +Setting the YouTube playlistid allows the playlist interface to load on interaction. Note, this still requires a videoid for to load a placeholder thumbnail as YouTube does not return a thumbnail for playlists in the API. + +```html + +``` + ## Add Video Title ```html ``` -## Change "Play" for Locale +## Update interface for Locale ```html ``` @@ -90,11 +102,12 @@ Height and Width are responsive in the component. ``` -## Set a video start time +## Enable YouTube Shorts interaction on mobile + +See [the example video](https://www.youtube.com/watch?v=aw7CRQTuRfo) of how this feature works for additional details. ```html - - + ``` ## AutoLoad with IntersectionObserver @@ -105,15 +118,34 @@ Uses Intersection Observer if available to automatically load the YouTube iframe ``` +## Set a video start time + +```html + + +``` + +## Fine tune the poster quality for a video + +```html + +``` + ## YouTube QueryParams -Use any [YouTube Embedded Players and Player Parameters](https://developers.google.com/youtube/player_parameters) you like +Use any [YouTube Embedded Players and Player Parameters](https://developers.google.com/youtube/player_parameters) you like. + +> Note: the exception to this rule is the autoplay param; because of the nature of the performance loading and the inconsistency of usage, that parameter generally does not work. See [this comment](https://github.com/justinribeiro/lite-youtube/issues/66#issuecomment-1182110925) for details. ```html ``` + ## Attributes The web component allows certain attributes to be give a little additional diff --git a/package.json b/package.json index b88a0a2..c052b32 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "lite-youtube.js.map" ], "license": "MIT", - "version": "1.3.2", + "version": "1.4.0", "main": "lite-youtube.js", "module": "lite-youtube.js", "types": "lite-youtube.d.ts",