Merge pull request #6 from elbotho/add-nocookie-option

add option to use privacy enhanced mode (nocookie)

Author: Ibrahim Cesar

README.md

@@ -49,6 +49,7 @@ const App = () => (
        playlist={false} // Use  true when your ID be from a playlist
        poster="hqdefault" // Defines the image size to call on first render as poster image. Possible values are "default","mqdefault",  "hqdefault", "sddefault" and "maxresdefault". Default value for this prop is "hqdefault". Please be aware that "sddefault" and "maxresdefault", high resolution images are not always avaialble for every video. See: https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api
        title="YouTube Embed" // a11y, always provide a title for iFrames: https://dequeuniversity.com/tips/provide-iframe-titles Help the web be accessible ;)
+       noCookie={true} //Default false, connect to YouTube via the Privacy-Enhanced Mode using https://www.youtube-nocookie.com
     />
   </div>
 );

dist/LiteYouTubeEmbed.js

@@ -8,6 +8,7 @@ var LiteYouTubeEmbed = function LiteYouTubeEmbed(_ref) {
       playlist = _ref.playlist,
       poster = _ref.poster,
       title = _ref.title,
+      noCookie = _ref.noCookie,
       activatedClass = _ref.activatedClass,
       iframeClass = _ref.iframeClass,
       playerClass = _ref.playerClass,
@@ -26,7 +27,8 @@ var LiteYouTubeEmbed = function LiteYouTubeEmbed(_ref) {
   var videoId = encodeURIComponent(id);
   var videoTitle = title;
   var posterUrl = "https://i.ytimg.com/vi/".concat(videoId, "/").concat(poster, ".jpg");
-  var iframeSrc = !playlist ? "https://www.youtube.com/embed/".concat(videoId, "?autoplay=1") : "https://www.youtube.com/embed/videoseries?list=".concat(videoId);
+  var ytUrl = noCookie ? "https://www.youtube-nocookie.com" : "https://www.youtube.com";
+  var iframeSrc = !playlist ? "".concat(ytUrl, "/embed/").concat(videoId, "?autoplay=1") : "".concat(ytUrl, "/embed/videoseries?list=").concat(videoId);
   var refVideo = useRef();
 
   var warmConnections = function warmConnections() {
@@ -55,7 +57,7 @@ var LiteYouTubeEmbed = function LiteYouTubeEmbed(_ref) {
     as: "image"
   }), React.createElement(React.Fragment, null, preconnected && React.createElement(React.Fragment, null, React.createElement("link", {
     rel: "preconnect",
-    href: "https://www.youtube.com"
+    href: ytUrl
   }), React.createElement("link", {
     rel: "preconnect",
     href: "https://www.google.com"
@@ -89,6 +91,7 @@ LiteYouTubeEmbed.defaultProps = {
   playlist: false,
   poster: "hqdefault",
   title: "YouTube Embed",
+  noCookie: false,
   activatedClass: "lyt-activated",
   iframeClass: "",
   playerClass: "lty-playbtn",

src/lib/LiteYouTubeEmbed.js

@@ -2,15 +2,20 @@ import React, { Fragment, useState, useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 import "./LiteYouTubeEmbed.css";
 
-const LiteYouTubeEmbed = ({ adNetwork, id, playlist, poster, title, activatedClass, iframeClass, playerClass, wrapperClass
+const LiteYouTubeEmbed = ({ adNetwork, id, playlist, poster, title, noCookie, activatedClass, iframeClass, playerClass, wrapperClass
 }) => {
 
   const [preconnected, setPreconnected] = useState(false);
   const [iframe, setIframe] = useState(false);
   const videoId = encodeURIComponent(id);
   const videoTitle = title;
   const posterUrl = `https://i.ytimg.com/vi/${videoId}/${poster}.jpg`;
-  const iframeSrc = !playlist ? `https://www.youtube.com/embed/${videoId}?autoplay=1` : `https://www.youtube.com/embed/videoseries?list=${videoId}`;
+  const ytUrl = noCookie
+    ? "https://www.youtube-nocookie.com"
+    : "https://www.youtube.com";
+  const iframeSrc = !playlist
+    ? `${ytUrl}/embed/${videoId}?autoplay=1`
+    : `${ytUrl}/embed/videoseries?list=${videoId}`;
   const refVideo = useRef();
 
   const warmConnections = () => {
@@ -40,7 +45,7 @@ const LiteYouTubeEmbed = ({ adNetwork, id, playlist, poster, title, activatedCla
       <>
       {preconnected && (
         <>
-          <link rel="preconnect" href="https://www.youtube.com" />
+          <link rel="preconnect" href={ytUrl} />
           <link rel="preconnect" href="https://www.google.com" />
           {adNetwork && (
             <>
@@ -81,22 +86,24 @@ LiteYouTubeEmbed.propTypes = {
   playlist: PropTypes.bool,
   poster: PropTypes.string,
   title: PropTypes.string,
+  noCookie: PropTypes.bool,
   activatedClass: PropTypes.string,
   iframeClass: PropTypes.string,
   playerClass: PropTypes.string,
   wrapperClass: PropTypes.string
 };
 
 LiteYouTubeEmbed.defaultProps = {
-  adNetwork: true, 
+  adNetwork: true,
   id: "",
   playlist: false,
   poster: "hqdefault",
   title: "YouTube Embed",
+  noCookie: false,
   activatedClass: "lyt-activated",
   iframeClass: "",
   playerClass: "lty-playbtn",
-  wrapperClass: "yt-lite"
+  wrapperClass: "yt-lite",
 };
 
 export default LiteYouTubeEmbed;