Responsive iframe for video embeds.
import { Embed } from 'theme-ui'
<Embed src="/?originalUrl=https%3A%2F%2Ftheme-ui.com%2F%26quot%3Bhttps%3A%2F%2Fwww.youtube.com%2Fembed%2FGNCd_ERZvZM%26quot%3B%2520%2F%26gt%3B%253C%2Ftextarea"><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:1rem;padding-right:1rem;padding-bottom:1rem;padding-left:1rem"><div class="token-line"><span class="token tag punctuation"><</span><span class="token tag class-name">Embed</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">https://www.youtube.com/embed/GNCd_ERZvZM</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag punctuation">/></span></div></pre><style type="text/css"> /** * Reset the text fill color so that placeholder is visible */ .npm__react-simple-code-editor__textarea:empty { -webkit-text-fill-color: inherit !important; } /** * Hack to apply on some CSS on IE10 and IE11 */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /** * IE doesn't support '-webkit-text-fill-color' * So we use 'color: transparent' to make the text transparent on IE * Unlike other browsers, it doesn't affect caret color in IE */ .npm__react-simple-code-editor__textarea { color: transparent !important; } .npm__react-simple-code-editor__textarea::selection { background-color: #accef7 !important; color: transparent !important; } } </style></div></pre> <p class="css-zezy6m">Props besides <style data-emotion="css 1hq2lit">.css-1hq2lit{color:var(--theme-ui-colors-primary);}.css-1hq2lit:hover{color:var(--theme-ui-colors-secondary);}</style><style data-emotion="css 11oc3wk">.css-11oc3wk{color:var(--theme-ui-colors-primary);color:var(--theme-ui-colors-primary);}.css-11oc3wk:hover{color:var(--theme-ui-colors-secondary);}.css-11oc3wk:hover{color:var(--theme-ui-colors-secondary);}</style><a href="/?originalUrl=https%3A%2F%2Ftheme-ui.com%2Fsx-prop" class="css-11oc3wk"><style data-emotion="css yigb6a">.css-yigb6a{font-family:Menlo,monospace;color:var(--theme-ui-colors-secondary);background-color:var(--theme-ui-colors-muted);}</style><style data-emotion="css 7ba0cc">.css-7ba0cc{font-family:Menlo,monospace;color:var(--theme-ui-colors-secondary);background-color:var(--theme-ui-colors-muted);font-family:Menlo,monospace;color:var(--theme-ui-colors-secondary);background-color:var(--theme-ui-colors-muted);}</style><code class="css-7ba0cc">sx</code></a> will be passed to the <code class="css-7ba0cc">iframe</code> itself, since using a <a href="/?originalUrl=https%3A%2F%2Faccessibility.18f.gov%2Fiframes%2F" class="css-11oc3wk"><code class="css-7ba0cc">title</code> prop</a> or other labels are recommended for accessibility.</p> <p class="css-zezy6m">Embed variants can be defined anywhere in the <code class="css-7ba0cc">theme</code> object.</p><style data-emotion="css 1kx8mb8">.css-1kx8mb8{display:inline-block;color:inherit;font-size:14px;margin-top:32px;margin-bottom:32px;}</style><a href="/?originalUrl=https%3A%2F%2Fgithub.com%2Fsystem-ui%2Ftheme-ui%2Fedit%2Fdevelop%2Fpackages%2Fdocs%2Fsrc%2Fpages%2Fcomponents%2Fembed.mdx" class="css-1kx8mb8">Edit the page on GitHub</a><style data-emotion="css 162tvoi">.css-162tvoi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div class="css-162tvoi"><style data-emotion="css 17jbust">.css-17jbust{font-size:14px;color:inherit;-webkit-text-decoration:none;text-decoration:none;font-weight:700;}</style><a href="/?originalUrl=https%3A%2F%2Ftheme-ui.com%2Fcomponents%2Fdonut" class="css-17jbust"><div>Previous:</div><style data-emotion="css t5vs5y">.css-t5vs5y{font-size:20px;}</style><div class="css-t5vs5y">Donut</div></a><style data-emotion="css 7rlkf5">.css-7rlkf5{margin-left:auto;margin-right:auto;}</style><div class="css-7rlkf5"></div><a href="/?originalUrl=https%3A%2F%2Ftheme-ui.com%2Fcomponents%2Ffield" class="css-17jbust"><div>Next:</div><div class="css-t5vs5y">Field</div></a></div></main></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script type="text/javascript" src="/?originalUrl=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fdocsearch.js%402%2Fdist%2Fcdn%2Fdocsearch.min.js"></script><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/components/embed";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" --> <script id="gatsby-chunk-mapping" > window.___chunkMapping="{\"app\":[\"/app-9236c24d5783520c0b69.js\"]}"; </script> <script>window.___webpackCompilationHash="f03b84f0fa4befa8cbf9";</script><script src="/?originalUrl=https%3A%2F%2Ftheme-ui.com%2Fwebpack-runtime-ebfa0e0f5674097ac951.js" async></script><script src="/?originalUrl=https%3A%2F%2Ftheme-ui.com%2F08320e11-9bc08f3fd1ab2f68c4ee.js" async></script><script src="/?originalUrl=https%3A%2F%2Ftheme-ui.com%2Fapp-9236c24d5783520c0b69.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>