diff --git a/readme.md b/readme.md index f78ba7d..51c3887 100644 --- a/readme.md +++ b/readme.md @@ -39,21 +39,6 @@ To use the custom element you will need to: Privacy note: lite-youtube uses youtube-nocookie.com instead of youtube.com in order to be more privacy friendly for end users. -### Custom Player Parameters - -YouTube supports a variety of [player parameters](https://developers.google.com/youtube/player_parameters#Parameters) to control the iframe's behavior and appearance. -These may be applied by using the `params` attribute. - -```html - - -``` - -Note that lite-youtube uses `autoplay=1` by default. - -Demo: https://paulirish.github.io/lite-youtube-embed/variants/params.html - ## Pro-usage: load w/ JS deferred (aka progressive enhancement) Use this as your HTML, load the script asynchronously, and let the JS progressively enhance it. @@ -66,7 +51,7 @@ Use this as your HTML, load the script asynchronously, and let the JS progressiv ``` -Demo: https://paulirish.github.io/lite-youtube-embed/variants/pe.html +[Demo: progressive enhancement](https://paulirish.github.io/lite-youtube-embed/variants/pe.html) ## Custom poster image @@ -77,6 +62,17 @@ If you want to provide a custom poster image, just set it as the background-imag Use [poster-image-availability.html](https://paulirish.github.io/lite-youtube-embed/testpage/poster-image-availability.html) to determine what poster images are available for you. +## Access the YouTube Iframe Player API + +Use the `js-api` param: ``.. Then you can use [IFrame Player API](https://developers.google.com/youtube/iframe_api_reference): + +```js +const player = await document.querySelector('lite-youtube').getPlayer(); +player.seekTo(15); // jump to 15 seconds +``` + +[Demo: Iframe Player API usage](https://paulirish.github.io/lite-youtube-embed/variants/js-api.html) + ## Add a video title If you want to display a title prior to loading the full embed, set the `title` attribute: @@ -84,7 +80,22 @@ If you want to display a title prior to loading the full embed, set the `title` ``` -Demo: https://paulirish.github.io/lite-youtube-embed/variants/title.html +[Demo: visible title](https://paulirish.github.io/lite-youtube-embed/variants/title.html) + +### Custom Player Parameters + +YouTube supports a variety of [player parameters](https://developers.google.com/youtube/player_parameters#Parameters) to control the iframe's behavior and appearance. +These may be applied by using the `params` attribute. + +```html + + +``` + +Note that lite-youtube uses `autoplay=1` by default. + +[Demo: Custom player parameters](https://paulirish.github.io/lite-youtube-embed/variants/params.html) ## Other fast YouTube embeds