feat(YouTube): Adds support for passing width and height of Youtube videos

Author: seanmcn

src/__tests__/transformers/YouTube.js

@@ -138,13 +138,24 @@ cases(
 );
 
 test('Gets the correct YouTube iframe', async () => {
-  const html = await getHTML('https://youtu.be/dQw4w9WgXcQ');
+  const html = await getHTML('https://youtu.be/dQw4w9WgXcQ', {});
 
   expect(html).toMatchInlineSnapshot(
     `<iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?rel=0" frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>`
   );
 });
 
+test('Gets the correct YouTube iframe with custom dimensions', async () => {
+  const html = await getHTML('https://youtu.be/dQw4w9WgXcQ', {
+    width: '50%',
+    height: '50%',
+  });
+
+  expect(html).toMatchInlineSnapshot(
+    `"<iframe width=\\"50%\\" height=\\"50%\\" src=\\"https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?rel=0\\" frameBorder=\\"0\\" allow=\\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\\" allowFullScreen></iframe>"`
+  );
+});
+
 test('Plugin can transform YouTube links', async () => {
   const markdownAST = getMarkdownASTForFile('YouTube');
 

src/transformers/YouTube.js

@@ -45,8 +45,8 @@ export const getYouTubeIFrameSrc = (urlString) => {
 
   return embedUrl.toString();
 };
-export const getHTML = (url) => {
+export const getHTML = (url, { width = '100%', height = '315' }) => {
   const iframeSrc = getYouTubeIFrameSrc(url);
 
-  return `<iframe width="100%" height="315" src="${iframeSrc}" frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>`;
+  return `<iframe width="${width}" height="${height}" src="${iframeSrc}" frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>`;
 };