30:T1b41,embed( '

View this post on Instagram

A post shared by Jerry Jäppinen (@jerryjappinen)

' )31:T1b5b,function instagram(instagramPostId) { return embed( `

View this post on Instagram

` ); }32:[{"id":"62fc18933eb920cc569510de7d67e34c81513ddca3926954bebcbd34ee9f67dd1ac2fa8f012898159c9066e32d6e9d838c417f03970ab703891119837fd9223d","href":"https://static.observableusercontent.com/files/62fc18933eb920cc569510de7d67e34c81513ddca3926954bebcbd34ee9f67dd1ac2fa8f012898159c9066e32d6e9d838c417f03970ab703891119837fd9223d","name":"UX design in the wild.pdf","type":"application/pdf","lastModified":1770892833507.43,"size":365515},{"id":"c15109ab6733b649d810c7b11589f9160c9d9cdacabec133175cdac67aead0f1fc651864d4cffdd270592c4475e59d8f6577a7c522145d1d7257be9d48baca11","href":"https://static.observableusercontent.com/files/c15109ab6733b649d810c7b11589f9160c9d9cdacabec133175cdac67aead0f1fc651864d4cffdd270592c4475e59d8f6577a7c522145d1d7257be9d48baca11","name":"Derivatives.pdf","type":"application/pdf","lastModified":1770893534825.651,"size":22445}] 2e:{"title":"Embed","cells":[{"id":0,"value":"# Embed","pinned":false,"hidden":false,"mode":"md"},{"id":656,"value":"Shareable embed codes from many services like *Wolfram Alpha*, *Twitter* and *GitHub* [don't work in Observable](https://twitter.com/jerryjappinen/status/1445835967252746248) because they use `

', 400)\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1493,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1659,"value":"### PDFs","pinned":false,"hidden":false,"mode":"md"},{"id":1451,"value":"Render a PDF attachment:","pinned":false,"hidden":false,"mode":"md"},{"id":1665,"value":"```js\nimport { pdf } from \"@jerryjappinen/embed\"\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1677,"value":"_demo_doc = FileAttachment(\"Derivatives.pdf\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1679,"value":"pdf(_demo_doc)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1661,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1662,"value":"Multi-page PDFs:","pinned":false,"hidden":false,"mode":"md"},{"id":1478,"value":"```js\nimport { pdf, pdfPages } from \"@jerryjappinen/embed\"\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1701,"value":"_demo_slides = FileAttachment(\"UX design in the wild.pdf\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1686,"value":"viewof pdf_page = Inputs.range([1, await pdfPages(_demo_slides)], { step: 1, value: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1689,"value":"pdf(_demo_slides, pdf_page)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1667,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1668,"value":"Set viewer width:","pinned":false,"hidden":false,"mode":"md"},{"id":1670,"value":"```js\npdf(attachment, 1, 480) // Absolute width\npdf(attachment, 1, width) // Full width\n```","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1432,"value":"## Examples","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"Any HTML code should work with `embed()`. Some examples using popular services:","pinned":false,"hidden":false,"mode":"md"},{"id":1449,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":471,"value":"### GitHub gists\n\nEmbed your Gist to show off your code:","pinned":false,"hidden":false,"mode":"md"},{"id":475,"value":"```js\nembed('')\n```","pinned":false,"hidden":false,"mode":"md"},{"id":469,"value":"embed(\n ''\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"### Twitter embed\n\n[Twitter Publish](https://publish.twitter.com/?query=https%3A%2F%2Ftwitter.com%2Fobservablehq%2Fstatus%2F1446741850019098630&widget=Tweet) gives you an embed code to copy-paste:","pinned":false,"hidden":false,"mode":"md"},{"id":272,"value":"```js\nembed('

Sorry for the delay, and great question. “HTML5 specifies that a <script> tag inserted with innerHTML should not execute”, which stymies the html`` literal. But you can put the whole thing in an iframe: https://t.co/QRG1SAsJnT
— Observable (@observablehq) October 9, 2021

'\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"### Instagram\n\nHad a cool meetup or co-creation workshop recently? Embed your [Instagram post](https://www.instagram.com/p/Bisaxw-nzHO/):","pinned":false,"hidden":false,"mode":"md"},{"id":290,"value":"```js\nembed('

`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":577,"value":"## Shorthands","pinned":false,"hidden":false,"mode":"md"},{"id":1374,"value":"These predefined shorthands make embedding popular services easy.","pinned":false,"hidden":false,"mode":"md"},{"id":1368,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1369,"value":"### Figma","pinned":false,"hidden":false,"mode":"md"},{"id":1376,"value":"function figma(fileId, nodeId) {\n return embed(\n ``\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1379,"value":"figma(\"egsN9lmc2dWJYdV0cf2cVP\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1371,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":684,"value":"### YouTube videos","pinned":false,"hidden":false,"mode":"md"},{"id":666,"value":"function youtube(videoId, startSeconds, w = 560) {\n return embed(\n ``\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"youtube(\"PZRI1IfStY0\", 0, 640)","pinned":true,"hidden":false,"mode":"ojs"},{"id":710,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1344,"value":"### Speaker Deck","pinned":false,"hidden":false,"mode":"md"},{"id":1351,"value":"speakerDeck(\"45fe4ba5fe414bf1a54dd8e869e36826\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1345,"value":"function speakerDeck(embedId, height) {\n return embed(\n ``\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":830,"value":"### Google Docs","pinned":false,"hidden":false,"mode":"md"},{"id":834,"value":"function googleDocs (publishId, height) {\n return embed(``)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":836,"value":"googleDoc = googleDocs // alias","pinned":true,"hidden":false,"mode":"ojs"},{"id":845,"value":"googleDoc(\"2PACX-1vTTdxGh4CM9GNZuWTlm-H9OGsRlX2W5iqSrZhTVhT5U8yz_kIxCjGfDVsnj7gLTUtE3rIxpOttFjfkG\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":828,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":780,"value":"### Google Forms","pinned":false,"hidden":false,"mode":"md"},{"id":781,"value":"function googleForms (publishId, height) {\n return embed(\n ``\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"googleForm = googleForms // alias","pinned":true,"hidden":false,"mode":"ojs"},{"id":795,"value":"googleForm(\"1FAIpQLSdfToTGc36Hfc7erII7k9ROV_gOWNXiwzImtOizTdtFr3j8aA\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":778,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":711,"value":"### Google Sheets","pinned":false,"hidden":false,"mode":"md"},{"id":718,"value":"See instructions in this notebook: [@jerryjappinen/google-sheets](https://observablehq.com/@jerryjappinen/google-sheets).","pinned":false,"hidden":false,"mode":"md"},{"id":713,"value":"googleSheets = embedGoogleSheet","pinned":true,"hidden":false,"mode":"ojs"},{"id":786,"value":"googleSheet = googleSheets // alias","pinned":true,"hidden":false,"mode":"ojs"},{"id":728,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":731,"value":"### Google Slides","pinned":false,"hidden":false,"mode":"md"},{"id":732,"value":"function googleSlides(publishId, options) {\n const { autoStart, loop, delay, width, height } = options || {};\n return embed(\n ``\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"googleSlide = googleSlides // alias","pinned":true,"hidden":false,"mode":"ojs"},{"id":771,"value":"Supported options: `autoStart`, `loop`, `delay`, `width`, `height`","pinned":false,"hidden":false,"mode":"md"},{"id":738,"value":"googleSlides(\"2PACX-1vSPk73rTpnxIAUtdFvjeVX2sl70__OFMj1_ygpfvrBCKXRJUxR1q_Wjo1dnBU22BTgX2kxT_Blfdk_1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":664,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":680,"value":"### Twitter tweets","pinned":false,"hidden":false,"mode":"md"},{"id":581,"value":"function tweet(tweetId) {\n return embed(\n `

`\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"tweet(\"1446741850019098630\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":676,"value":"### GitHub Gists","pinned":false,"hidden":false,"mode":"md"},{"id":614,"value":"function gist(userOrPath, gistId) {\n return embed(\n ``\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"gist(\"jerryjappinen/a52cf7d019e1665e0ccc05adf954305f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"gist(\"jerryjappinen\", \"a52cf7d019e1665e0ccc05adf954305f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":636,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1394,"value":"### SoundCloud","pinned":false,"hidden":false,"mode":"md"},{"id":1395,"value":"function soundcloud(playlistId) {\n return embed(\n ``\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1398,"value":"soundcloud(1895143471)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1392,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":688,"value":"### Instagram posts","pinned":false,"hidden":false,"mode":"md"},{"id":638,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"instagram(\"BisaoboHvkE\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":692,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"## Source","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"function embed(scriptHtml, height) {\n\n // Hackily auto adjust height\n // iframe content usually loads for a while and might change, so we auto adjust every 100ms\n // You can disable this by providing a fixed height\n const adjust = `obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';`;\n const onload = `setInterval(\n ((obj) => { return () => { ${adjust} } })(this),\n 100\n )`;\n\n // Html\n const style = `width:100%;border:none;${\n height ? \"height:\" + height + \"px;\" : \"\"\n }`;\n\n return Object.assign(\n html`