.github/workflows/deploy.yml

@@ -11,12 +11,13 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v2
-      - name: Use Node.js 14
-        uses: actions/setup-node@v1
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
         with:
-          node-version: 14.x
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        run: yarn install
       - name: Build example
         run: yarn example:build
       - name: Deploy to GitHub pages

.github/workflows/release.yml

@@ -12,12 +12,13 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v2
-      - name: Use Node.js 14
-        uses: actions/setup-node@v1
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
         with:
-          node-version: 14.x
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        run: yarn install
       - name: Run tests
         run: yarn test
       - name: Build

.github/workflows/tests.yml

@@ -8,15 +8,16 @@ jobs:
     name: Node.js ${{ matrix.node }}
     strategy:
       matrix:
-        node: ["10.x", "11.x", "12.x", "13.x", "14.x", "15.x"]
+        node: ['10.x', '11.x', '12.x', '13.x', '14.x', '15.x', '16.x', '17.x']
     steps:
       - name: Checkout
         uses: actions/checkout@v2
       - name: Setup Node.js ${{ matrix.node }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
+          cache: 'yarn'
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        run: yarn install
       - name: Run tests
         run: yarn test:ci

.nvmrc

@@ -0,0 +1 @@
+16.13

README.md

@@ -24,6 +24,7 @@ $ npm install react-youtube
   id={string}                       // defaults -> null
   className={string}                // defaults -> null
   containerClassName={string}       // defaults -> ''
+  title={string}                    // defaults -> null
   opts={obj}                        // defaults -> {}
   onReady={func}                    // defaults -> noop
   onPlay={func}                     // defaults -> noop

index.d.ts

@@ -37,6 +37,8 @@ export interface YouTubeProps {
   id?: string;
   className?: string;
   containerClassName?: string;
+  title?: string;
+  loading?: 'lazy' | 'eager' | 'auto';
   opts?: Options;
   onReady?(event: { target: YouTubePlayer }): void;
   onError?(event: { target: YouTubePlayer; data: number }): void;

src/YouTube.js

@@ -33,11 +33,13 @@ function shouldUpdateVideo(prevProps, props) {
 function filterResetOptions(opts) {
   return {
     ...opts,
+    height: 0,
+    width: 0,
     playerVars: {
+      ...opts.playerVars,
       autoplay: 0,
       start: 0,
       end: 0,
-      ...opts.playerVars,
     },
   };
 }
@@ -52,7 +54,9 @@ function filterResetOptions(opts) {
  * @param {Object} props
  */
 function shouldResetPlayer(prevProps, props) {
-  return !isEqual(filterResetOptions(prevProps.opts), filterResetOptions(props.opts));
+  return (
+    prevProps.videoId !== props.videoId || !isEqual(filterResetOptions(prevProps.opts), filterResetOptions(props.opts))
+  );
 }
 
 /**
@@ -62,7 +66,13 @@ function shouldResetPlayer(prevProps, props) {
  * @param {Object} props
  */
 function shouldUpdatePlayer(prevProps, props) {
-  return prevProps.id !== props.id || prevProps.className !== props.className;
+  return (
+    prevProps.id !== props.id ||
+    prevProps.className !== props.className ||
+    prevProps.opts.width !== props.opts.width ||
+    prevProps.opts.height !== props.opts.height ||
+    prevProps.title !== props.title
+  );
 }
 
 class YouTube extends React.Component {
@@ -213,6 +223,12 @@ class YouTube extends React.Component {
       else iframe.removeAttribute('id');
       if (this.props.className) iframe.setAttribute('class', this.props.className);
       else iframe.removeAttribute('class');
+      if (this.props.opts && this.props.opts.width) iframe.setAttribute('width', this.props.opts.width);
+      else iframe.removeAttribute('width');
+      if (this.props.opts && this.props.opts.height) iframe.setAttribute('height', this.props.opts.height);
+      else iframe.removeAttribute('height');
+      if (typeof this.props.title === 'string') iframe.setAttribute('title', this.props.title);
+      else iframe.setAttribute('title', 'YouTube video player');
     });
   };
 
@@ -265,7 +281,7 @@ class YouTube extends React.Component {
   render() {
     return (
       <div className={this.props.containerClassName}>
-        <div id={this.props.id} className={this.props.className} ref={this.refContainer} />
+        <div id={this.props.id} className={this.props.className} ref={this.refContainer} loading={this.props.loading} />
       </div>
     );
   }
@@ -281,6 +297,11 @@ YouTube.propTypes = {
   className: PropTypes.string,
   // custom class name for player container element
   containerClassName: PropTypes.string,
+  // custom title for the iFrame, see https://www.w3.org/TR/WCAG20-TECHS/H64.html
+  title: PropTypes.string,
+
+  // custom loading for player element
+  loading: PropTypes.oneOf(['lazy', 'eager', 'auto']),
 
   // https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
   opts: PropTypes.objectOf(PropTypes.any),
@@ -300,6 +321,7 @@ YouTube.defaultProps = {
   videoId: null,
   id: null,
   className: null,
+  loading: null,
   opts: {},
   containerClassName: '',
   onReady: () => {},
@@ -310,6 +332,7 @@ YouTube.defaultProps = {
   onStateChange: () => {},
   onPlaybackRateChange: () => {},
   onPlaybackQualityChange: () => {},
+  title: null,
 };
 
 export default YouTube;

src/Youtube.test.js

@@ -44,6 +44,22 @@ describe('YouTube', () => {
     expect(playerMock.getIframe).toHaveBeenCalled();
   });
 
+  it('should update the title when modified', () => {
+    const { rerender } = render(<YouTube title="Video about a cat" videoId="XxVg_s8xAms" />);
+
+    rerender(<YouTube title="Video about a dancing cat" videoId="XxVg_s8xAms" />);
+
+    expect(playerMock.getIframe).toHaveBeenCalled();
+  });
+
+  it('should update the title when removed', () => {
+    const { rerender } = render(<YouTube title="Video about a cat" videoId="XxVg_s8xAms" />);
+
+    rerender(<YouTube videoId="XxVg_s8xAms" />);
+
+    expect(playerMock.getIframe).toHaveBeenCalled();
+  });
+
   it('should not update id and className when no change in them', () => {
     const className = 'custom-class';
     const videoId = 'XxVg_s8xAms';
@@ -117,6 +133,8 @@ describe('YouTube', () => {
           width: '480px',
           height: '360px',
           playerVars: {
+            height: 0, // changed, does not force destroy & rebind
+            width: 0, // changed, does not force destroy & rebind
             autoplay: 1, // changed, does not force destroy & rebind
             start: 10, // changed, does not force destroy & rebind
             end: 20, // changed, does not force destroy & rebind
@@ -127,6 +145,43 @@ describe('YouTube', () => {
 
     // player is destroyed & rebound, despite the changes
     expect(playerMock.destroy).toHaveBeenCalled();
+    // and the video is updated
+    expect(playerMock.loadVideoById).toHaveBeenCalled();
+  });
+
+  it('should not create and bind a new YouTube player when only playerVars.autoplay, playerVars.start, or playerVars.end change', () => {
+    const { rerender } = render(
+      <YouTube
+        videoId="XxVg_s8xAms"
+        opts={{
+          width: '480px',
+          height: '360px',
+          playerVars: {
+            autoplay: 0,
+            start: 0,
+            end: 50,
+          },
+        }}
+      />,
+    );
+
+    rerender(
+      <YouTube
+        videoId="XxVg_s8xAms"
+        opts={{
+          width: '480px',
+          height: '360px',
+          playerVars: {
+            autoplay: 1, // changed, does not force destroy & rebind
+            start: 10, // changed, does not force destroy & rebind
+            end: 20, // changed, does not force destroy & rebind
+          },
+        }}
+      />,
+    );
+
+    // player is destroyed & rebound, despite the changes
+    expect(playerMock.destroy).not.toHaveBeenCalled();
     // instead only the video is updated
     expect(playerMock.loadVideoById).toHaveBeenCalled();
   });