@cleverage/responsive-video-background
Advanced tools
Comparing version 1.0.3 to 1.0.5
@@ -6,3 +6,3 @@ { | ||
| }, | ||
| "version": "1.0.3", | ||
| "version": "1.0.5", | ||
| "description": "A JavaScript library to help build components with responsive video and/or image background", | ||
@@ -9,0 +9,0 @@ "main": "responsive-video-background.js", |
| # `<responsive-video-background />` Web Component | ||
| [](https://www.npmjs.com/package/@cleverage/responsive-video-background) [](https://www.npmjs.com/package/@cleverage/responsive-video-background)  | ||
| [](https://www.npmjs.com/package/@cleverage/responsive-video-background) [](https://www.npmjs.com/package/@cleverage/responsive-video-background)  [](https://www.clever-age.com/) | ||
| A Web Component that helps **responsively using a video as the background of a content block**. | ||
| A Web Component that helps **responsively using a video as the background of a content block**. The video usage can be restricted to large viewports, with an image fallback on thinner ones. | ||
| The video usage can be restricted to large viewports, with an image fallback on thinner ones. | ||
| The dimensions of the Web Component are determined by the content inside it. You can style the Web Component with CSS, but it is better to style the content itself, as there could be a layout shift with the component's styles because JavaScript has to run to really make it available. | ||
@@ -21,3 +21,3 @@ ## Examples | ||
| <style> | ||
| …inline CSS styles for the component, to prevent layout shifts | ||
| /* …inline CSS styles for the component, to prevent layout shifts */ | ||
| </style> | ||
@@ -41,5 +41,5 @@ <responsive-video-background | ||
| | --------- | ----------- | ------- | | ||
| | `webm` | URL to the WebM version of the video | https://example.com/path/to/video.webm | | ||
| | `mp4` | URL to the MP4 version of the video | https://example.com/path/to/video.mp4 | | ||
| | `poster` | URL to the video's poster image (should be the first frame) | https://example.com/path/to/video-poster.jpg | | ||
| | `webm` | URL to the WebM version of the video | https://cleverage.github.io/responsive-video-background/demo/Big_Buck_Bunny_720_10s_1MB.webm | | ||
| | `mp4` | URL to the MP4 version of the video | https://cleverage.github.io/responsive-video-background/Big_Buck_Bunny_720_10s_1MB.mp4 | | ||
| | `poster` | URL to the video's poster image. This should be the first frame of the video, and an highly optimized progressive JPEG | https://cleverage.github.io/responsive-video-background/Big_Buck_Bunny_720.jpg | | ||
| | `fallback` | URL to the fallback image, for the `src` attribute | https://example.com/path/to/image-fallback.jpg | | ||
@@ -63,3 +63,4 @@ | `srcset` | Value of the `srcset` attribute for the responsive image | `https://example.com/path/to/image-320px.jpg 320w, https://example.com/path/to/image-850px.jpg 850w, https://example.com/path/to/image-1600px.jpg 1600w` | | ||
| Why isn't the image switching to a video when the viewport becomes larger? | ||
| : This is not a bug. The idea is to prevent a strong visual change when the user changes the viewport, either by resizing the browser, or rotating the device. | ||
| | Question | Answer | | ||
| | -------- | ------ | | ||
| | Why isn't the image switching to a video when the viewport becomes larger? | This is not a bug. The idea is to prevent a strong visual change when the user changes the viewport, either by resizing the browser, or rotating the device. | |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by7.18%
9966
- Number of lines in readme file
- increased by1.59%
64
No dependency changes