Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-lite-youtube-embed
Advanced tools
react-lite-youtube-embed - npm Package Compare versions
Comparing version 0.4.3 to 1.0.0-beta
| import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray"; | ||
| import React, { Fragment, useState } from "react"; | ||
| import "./LiteYouTubeEmbed.css"; | ||
@@ -5,0 +4,0 @@ var LiteYouTubeEmbed = function LiteYouTubeEmbed(_ref) { |
| { | ||
| "name": "react-lite-youtube-embed", | ||
| "version": "0.4.3", | ||
| "version": "1.0.0-beta", | ||
| "main": "dist/index", | ||
| "module": "dist/index", | ||
| "repository": { | ||
@@ -37,8 +36,8 @@ "type": "git", | ||
| "devDependencies": { | ||
| "@babel/cli": "^7.7.4", | ||
| "babel-preset-react-app": "^9.1.0", | ||
| "react": "^16.12.0", | ||
| "react-dom": "^16.12.0", | ||
| "react-scripts": "^3.2.0", | ||
| "rimraf": "^3.0.0" | ||
| "@babel/cli": "^7.13.14", | ||
| "babel-preset-react-app": "^10.0.0", | ||
| "react": "^17.0.2", | ||
| "react-dom": "^17.0.2", | ||
| "react-scripts": "^4.0.3", | ||
| "rimraf": "^3.0.2" | ||
| }, | ||
@@ -45,0 +44,0 @@ "browserslist": { |
@@ -9,2 +9,100 @@ # React Lite YouTube Embed | ||
| ## Version 2.0 - BREAKNG CHANGE | ||
| To play nice with new frameworks like [NextJS](https://nextjs.org/), we now don't import the `.css` necessary. Instead in order to use now you have three options: | ||
| ### Option 1 | ||
| Manual import our file in your React application this way: | ||
| ### Option 2 | ||
| Place the necessary CSS in your Global CSS file | ||
| ```css | ||
| .yt-lite { | ||
| background-color: #000; | ||
| position: relative; | ||
| display: block; | ||
| contain: content; | ||
| background-position: center center; | ||
| background-size: cover; | ||
| cursor: pointer; | ||
| } | ||
| /* gradient */ | ||
| .yt-lite::before { | ||
| content: ''; | ||
| display: block; | ||
| position: absolute; | ||
| top: 0; | ||
| background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==); | ||
| background-position: top; | ||
| background-repeat: repeat-x; | ||
| height: 60px; | ||
| padding-bottom: 50px; | ||
| width: 100%; | ||
| transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); | ||
| } | ||
| /* responsive iframe with a 16:9 aspect ratio | ||
| thanks https://css-tricks.com/responsive-iframes/ | ||
| */ | ||
| .yt-lite::after { | ||
| content: ""; | ||
| display: block; | ||
| padding-bottom: calc(100% / (16 / 9)); | ||
| } | ||
| .yt-lite > iframe { | ||
| width: 100%; | ||
| height: 100%; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| } | ||
| /* play button */ | ||
| .yt-lite > .lty-playbtn { | ||
| width: 70px; | ||
| height: 46px; | ||
| background-color: #212121; | ||
| z-index: 1; | ||
| opacity: 0.8; | ||
| border-radius: 14%; /* TODO: Consider replacing this with YT's actual svg. Eh. */ | ||
| transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); | ||
| } | ||
| .yt-lite:hover > .lty-playbtn { | ||
| background-color: #f00; | ||
| opacity: 1; | ||
| } | ||
| /* play button triangle */ | ||
| .yt-lite > .lty-playbtn:before { | ||
| content: ''; | ||
| border-style: solid; | ||
| border-width: 11px 0 11px 19px; | ||
| border-color: transparent transparent transparent #fff; | ||
| } | ||
| .yt-lite > .lty-playbtn, | ||
| .yt-lite > .lty-playbtn:before { | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate3d(-50%, -50%, 0); | ||
| } | ||
| /* Post-click styles */ | ||
| .yt-lite.lyt-activated { | ||
| cursor: unset; | ||
| } | ||
| .yt-lite.lyt-activated::before, | ||
| .yt-lite.lyt-activated > .lty-playbtn { | ||
| opacity: 0; | ||
| pointer-events: none; | ||
| } | ||
| ``` | ||
| ### Option 3 | ||
| Using your CSS-In-JS tool of choice encapsulate this component and use the css provided as a guide. | ||
| ## Installation | ||
@@ -11,0 +109,0 @@ |
Sorry, the diff of this file is not supported yet
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 by20.71%
13889
- Number of lines in readme file
- increased by96.08%
200
Worsened metrics
- Lines of code
- decreased by-0.62%
159
No dependency changes