feat: 🎸 stretch YouTube videos 100%

BREAKING CHANGE: 🧨 YouTube embeds are now stretched to 100% width. Limit stretching by wrapping this component in a custom <div>.
streamich · Feb 16, 2020 · 967984a · 967984a
1 parent b3cbd8c
commit 967984a
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/blocks/youtube/index.tsx b/src/blocks/youtube/index.tsx
@@ -4,14 +4,19 @@ import {BlockProps} from '../..';
 import {rule} from 'p4-css';
 
 const blockClass = rule({
+  w: '100%',
+});
+
+const iframeClass = rule({
   d: 'block',
   maxW: '100%',
+  w: '100%',
 });
 
 const Y = YouTube as any;
 
-const YouTubeWrapper: React.SFC<BlockProps> = ({id, renderWrap}) => {
-  return renderWrap(<Y videoId={id} className={blockClass} />);
+const YouTubeWrapper: React.FC<BlockProps> = ({id, renderWrap}) => {
+  return renderWrap(<Y videoId={id} containerClassName={blockClass} className={iframeClass} />);
 };
 
 export default YouTubeWrapper;