feat(video): support youtube nocookie embed

Author: sachinchoolur

src/plugins/video/lg-video-utils.ts

@@ -54,6 +54,10 @@ export const getYouTubeParams = (
     return youTubeParams;
 };
 
+export const isYouTubeNoCookie = (url: string): boolean => {
+    return url.includes('youtube-nocookie.com');
+};
+
 export const getVimeoURLParams = (
     defaultParams: PlayerParams,
     videoInfo?: VideoInfo,

src/plugins/video/lg-video.ts

@@ -35,7 +35,12 @@ import {
 } from '../../types';
 import { lGEvents } from '../../lg-events';
 import { VideoSource } from './types';
-import { getVimeoURLParams, getYouTubeParams, param } from './lg-video-utils';
+import {
+    getVimeoURLParams,
+    getYouTubeParams,
+    isYouTubeNoCookie,
+    param,
+} from './lg-video-utils';
 
 declare let Vimeo: any;
 declare let videojs: any;
@@ -236,7 +241,13 @@ export default class Video {
                 this.settings.youTubePlayerParams,
             );
 
-            video = `<iframe allow="autoplay" id=${videoId} class="lg-video-object lg-youtube ${addClass}" ${videoTitle} src="//www.youtube.com/embed/${
+            const isYouTubeNoCookieURL = isYouTubeNoCookie(src);
+
+            const youtubeURL = isYouTubeNoCookieURL
+                ? '//www.youtube-nocookie.com/'
+                : '//www.youtube.com/';
+
+            video = `<iframe allow="autoplay" id=${videoId} class="lg-video-object lg-youtube ${addClass}" ${videoTitle} src="${youtubeURL}embed/${
                 videoInfo.youtube[1] + youTubeParams
             }" ${commonIframeProps}></iframe>`;
         } else if (videoInfo.vimeo) {

test/lg-video.test.ts

@@ -11,6 +11,7 @@ import '@testing-library/jest-dom';
 import {
     getVimeoURLParams,
     getYouTubeParams,
+    isYouTubeNoCookie,
 } from '../src/plugins/video/lg-video-utils';
 import utils from '../src/lg-utils';
 import { VideoInfo } from '../src/types';
@@ -136,7 +137,7 @@ describe('Vimeo Video', () => {
 
 describe('YouTube Video', () => {
     it('should build player params', async () => {
-        const url = '="//www.youtube.com/watch?v=EIUJfXk3_3w';
+        const url = '//www.youtube.com/watch?v=EIUJfXk3_3w';
         const videoInfo = utils.isVideo(url, false, 0);
         const settingParam = {
             color: 'red',
@@ -148,7 +149,7 @@ describe('YouTube Video', () => {
         );
     });
     it('should override default params with src parmas', async () => {
-        const url = '="//www.youtube.com/watch?v=EIUJfXk3_3w&mute=0';
+        const url = '//www.youtube.com/watch?v=EIUJfXk3_3w&mute=0';
         const videoInfo = utils.isVideo(url, false, 0);
         const settingParam = {
             color: 'red',
@@ -160,21 +161,21 @@ describe('YouTube Video', () => {
         );
     });
     it('should work if settingsParams not provided', async () => {
-        const url = '="//www.youtube.com/watch?v=EIUJfXk3_3w&mute=0';
+        const url = '//www.youtube.com/watch?v=EIUJfXk3_3w&mute=0';
         const videoInfo = utils.isVideo(url, false, 0);
         const settingParam = false;
         const params = getYouTubeParams(videoInfo as VideoInfo, settingParam);
         expect(params).toBe('?wmode=opaque&autoplay=0&mute=0&enablejsapi=1');
     });
     it('should work if settingsParams and src params not provided', async () => {
-        const url = '="//www.youtube.com/watch?v=EIUJfXk3_3w';
+        const url = '//www.youtube.com/watch?v=EIUJfXk3_3w';
         const videoInfo = utils.isVideo(url, false, 0);
         const settingParam = false;
         const params = getYouTubeParams(videoInfo as VideoInfo, settingParam);
         expect(params).toBe('?wmode=opaque&autoplay=0&mute=1&enablejsapi=1');
     });
     it('should override default params with settings params', async () => {
-        const url = '="//www.youtube.com/watch?v=EIUJfXk3_3w';
+        const url = '//www.youtube.com/watch?v=EIUJfXk3_3w';
         const videoInfo = utils.isVideo(url, false, 0);
         const settingParam = {
             autoplay: 1,
@@ -184,7 +185,7 @@ describe('YouTube Video', () => {
         expect(params).toBe('?wmode=opaque&autoplay=1&mute=0&enablejsapi=1');
     });
     it('should override settings params with src params', async () => {
-        const url = '="//www.youtube.com/watch?v=EIUJfXk3_3w&mute=0&color=red';
+        const url = '//www.youtube.com/watch?v=EIUJfXk3_3w&mute=0&color=red';
         const videoInfo = utils.isVideo(url, false, 0);
         const settingParam = {
             autoplay: 1,
@@ -195,4 +196,16 @@ describe('YouTube Video', () => {
             '?wmode=opaque&autoplay=1&mute=0&enablejsapi=1&color=red',
         );
     });
+
+    it('should detect as no-cookie url', async () => {
+        const url = 'https://www.youtube-nocookie.com/embed/r87A-Ql2czg';
+        const isYouTubeNoCookieURL = isYouTubeNoCookie(url);
+        expect(isYouTubeNoCookieURL).toBeTruthy();
+    });
+
+    it('should detect as normal youtube url', async () => {
+        const url = '//www.youtube.com/watch?v=EIUJfXk3_3w&mute=0&color=red';
+        const isYouTubeNoCookieURL = isYouTubeNoCookie(url);
+        expect(isYouTubeNoCookieURL).toBeFalsy();
+    });
 });