mirax-player
Advanced tools
mirax-player - npm Package Compare versions
Comparing version 3.0.0-beta.1 to 3.0.0-beta.2
@@ -6,3 +6,3 @@ # Changelog | ||
| - Feature: Mirax embed follows api docs for YouTube and Vimeo | ||
| - Bug Fix: Removed unnecessary docs. | ||
| - Bug Fix: Fixed responsive css issue for embed video. | ||
| - Documentation: In some ways controllers for embed videos are based on their official developer sites. | ||
@@ -13,5 +13,5 @@ | ||
| ### [3.0.0-beta.1] | ||
| ### [3.0.0-beta.2] | ||
| - Initial beta Release: Documentation features included in this beta version. | ||
| { | ||
| "name": "mirax-player", | ||
| "version": "3.0.0-beta.1", | ||
| "version": "3.0.0-beta.2", | ||
| "description": "Mirax Player is an adaptable video player and embedding solution that seamlessly integrates with TypeScript and JavaScript applications across a range of popular front-end libraries and frameworks, including React, Vue, Angular, and Svelte.", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
133
README.md
@@ -30,3 +30,2 @@ <p align="center"> | ||
| - [CSS Player](#css-player) | ||
| - [CSS Embed](#css-embed) | ||
| - [Colors](#colors) | ||
@@ -129,3 +128,24 @@ - [License](#license) | ||
| ``` | ||
| - Embed videos [CSS for Embed Video](#css-embed) | ||
| - Embed videos | ||
| -------- | ||
| Add css first: | ||
| ----- | ||
| ```css | ||
| .embed_clip { | ||
| position: relative; | ||
| width: 100%; | ||
| max-width: 640px; /* // same value also in params editable*/ | ||
| height: 360px; /* same value also in params editable*/ | ||
| margin: 0 auto; | ||
| overflow: hidden; | ||
| } | ||
| .embed_clip iframe { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| ``` | ||
| ```js | ||
@@ -141,3 +161,4 @@ import React, { useEffect, useRef } from "react"; | ||
| const youtubeParams = { | ||
| width: 1000, height: 660, | ||
| width: 640, | ||
| height: 360, | ||
| playerVars: { | ||
@@ -155,4 +176,4 @@ controls: 1, | ||
| const vimeoParams = { | ||
| width: 1300, | ||
| height: 760, | ||
| width: 640, | ||
| height: 360, | ||
| autopause: 0, | ||
@@ -210,4 +231,24 @@ controls: true, | ||
| ``` | ||
| - Embed videos - [CSS for Embed Video](#css-embed) | ||
| ------------- | ||
| - Embed videos | ||
| Add css first: | ||
| ----- | ||
| ```css | ||
| .embed_clip { | ||
| position: relative; | ||
| width: 100%; | ||
| max-width: 640px; /* // same value also in params editable*/ | ||
| height: 360px; /* same value also in params editable*/ | ||
| margin: 0 auto; | ||
| overflow: hidden; | ||
| } | ||
| .embed_clip iframe { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| ``` | ||
| ```js | ||
@@ -235,4 +276,4 @@ <template> | ||
| const youtubeParams = { | ||
| width: 1000, | ||
| height: 660, | ||
| width: 640, | ||
| height: 360, | ||
| playerVars: { | ||
@@ -249,4 +290,4 @@ controls: 1, | ||
| const vimeoParams = { | ||
| width: 1000, | ||
| height: 660, | ||
| width: 640, | ||
| height: 360, | ||
| autopause: 0, | ||
@@ -312,3 +353,24 @@ controls: true, | ||
| ``` | ||
| - Embed videos - [CSS for Embed Video](#css-embed) | ||
| - Embed videos | ||
| Add css first: | ||
| ----- | ||
| ```css | ||
| .embed_clip { | ||
| position: relative; | ||
| width: 100%; | ||
| max-width: 640px; /* // same value also in params editable*/ | ||
| height: 360px; /* same value also in params editable*/ | ||
| margin: 0 auto; | ||
| overflow: hidden; | ||
| } | ||
| .embed_clip iframe { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| ``` | ||
| ```js | ||
@@ -384,3 +446,24 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; | ||
| ``` | ||
| - Embed videos - [CSS for Embed Video](#css-embed) | ||
| - Embed videos | ||
| Add css first: | ||
| ----- | ||
| ```css | ||
| .embed_clip { | ||
| position: relative; | ||
| width: 100%; | ||
| max-width: 640px; /* // same value also in params editable*/ | ||
| height: 360px; /* same value also in params editable*/ | ||
| margin: 0 auto; | ||
| overflow: hidden; | ||
| } | ||
| .embed_clip iframe { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| ``` | ||
| ```js | ||
@@ -469,26 +552,2 @@ <script> | ||
| ## CSS-embed | ||
| - Add to your css file to make more responsive: | ||
| -------- | ||
| ```css | ||
| .embed_clip { | ||
| position: relative; | ||
| padding-bottom: 56.25%; | ||
| height: 0; | ||
| overflow: hidden; | ||
| } | ||
| .embed_clip iframe, | ||
| .embed_clip object, | ||
| .embed_clip embed { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| ``` | ||
| ## Colors | ||
@@ -495,0 +554,0 @@ |
@@ -14,4 +14,4 @@ ```js | ||
| const youtubeParams = { | ||
| width: 1000, | ||
| height: 660, | ||
| width: 640, | ||
| height: 360, | ||
| playerVars: { | ||
@@ -27,4 +27,4 @@ controls: 1, | ||
| const vimeoParams = { | ||
| width: 1000, | ||
| height: 660, | ||
| width: 640, | ||
| height: 360, | ||
| autopause: 0, | ||
@@ -31,0 +31,0 @@ controls: true, |
@@ -11,3 +11,4 @@ ```js | ||
| const youtubeParams = { | ||
| width: 1000, height: 660, | ||
| width: 640, | ||
| height: 360, | ||
| playerVars: { | ||
@@ -23,4 +24,4 @@ controls: 1, | ||
| const vimeoParams = { | ||
| width: 1300, | ||
| height: 760, | ||
| width: 640, | ||
| height: 360, | ||
| autopause: 0, | ||
@@ -27,0 +28,0 @@ controls: true, |
@@ -10,4 +10,4 @@ ```js | ||
| const youtubeParams = { | ||
| width: 1000, | ||
| height: 660, | ||
| width: 640, | ||
| height: 360, | ||
| playerVars: { | ||
@@ -23,4 +23,4 @@ controls: 1, | ||
| const vimeoParams = { | ||
| width: 1300, | ||
| height: 760, | ||
| width: 640, | ||
| height: 360, | ||
| autopause: 0, | ||
@@ -27,0 +27,0 @@ controls: true, |
@@ -11,4 +11,4 @@ ```js | ||
| const youtubeParams = { | ||
| width: 600, | ||
| height: 460, | ||
| width: 640, | ||
| height: 360, | ||
| playerVars: { | ||
@@ -25,4 +25,4 @@ controls: 1, | ||
| const vimeoParams = { | ||
| width: 1300, | ||
| height: 760, | ||
| width: 6400, | ||
| height: 360, | ||
| autopause: 0, | ||
@@ -29,0 +29,0 @@ controls: true, |
@@ -23,4 +23,4 @@ ```js | ||
| const youtubeParams = { | ||
| width: 1000, | ||
| height: 660, | ||
| width: 6400, | ||
| height: 360, | ||
| playerVars: { | ||
@@ -37,4 +37,4 @@ controls: 1, | ||
| const vimeoParams = { | ||
| width: 1000, | ||
| height: 660, | ||
| width: 640, | ||
| height: 360, | ||
| autopause: 0, | ||
@@ -41,0 +41,0 @@ controls: true, |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.44%
67616
- Number of lines in readme file
- increased by11.66%
565